I’m creating a domain name search form. It could take up to 10 seconds after hitting “search” to get a result. I want to display a “loading” animation in the meantime, something like this:

<section class="textual">
  <div class="wrap">

    <form method="post" phx-submit="search">
      <input type="text" name="q" placeholder="mytribe.com" />
      <button class="submit">Search</button>
    </form>
    
    <%= if @loading do %>
      LOADING . . .
    <% end %>
    
    <pre>
      <%= inspect(@results, pretty: true) %>
    </pre>
  </div>
</section>

What I can’t seem to figure out is how to set the “loading” state while handling the event…

  @impl true
  def handle_event("search", %{"q" => q}, socket) do
    push_event(socket, "set_loading", true) # This does nothing, pretty sure I've misunderstood the purpose of this function

    with {:ok, %{body: %{"data" => data}}} <- Epik.check_domains([q]) do
      {:noreply, assign(socket, :results, data)}
    end
  end

Right when the “search” event is starting to be handled, I want my template to have the loading animation. Then ~10s later when I get the result, I want to display the result.

I really don’t understand how LiveView/GenServer works on a fundamental level yet, but I’m starting to think maybe this isn’t possible.