I’m building a chat application, and would like to have a typing indicator (like a bouncing ...) appear when I’m waiting on a response, and then disappear when the response appears.

Currently I have the following in my template. When @typing is set to true, the typing indicator appears just like it should. But when @typing is set to false (and I’ve confirmed it’s getting set to false with a {typing} in the template), the indicator stays.

Lots of iterations and attempts with ChatGPT have gotten me nowhere, so I come to you experts. How do I make the contents of the if @typing do section disappear once @typing is false?

    <div
    id="messages"
    phx-update="stream"
    class="space-y-4 relative w-full p-6 overflow-y-auto scroll-smooth h-[30rem]"
    phx-hook="ScrollToBottom"
  >
    <%= for {message_id, message} <- @streams.messages do %>
      <div id={message_id} class="flow-root">
        <div class={[
          "relative max-w-md mx-4 px-4 py-2 text-gray-700 rounded shadow bg-gray-100 border-gray-500 justify-start text-left",
          if(message.actor == "user",
            do: "bg-lime-100 justify-end float-right text-right",
            else: "bg-gray-400 float-left"
          )
        ]}>
          <span class="block">{message.content}</span>
        </div>
      </div>
    <% end %>

    <%= if @typing do %>
      <div id="typing-indicator" class="flex clear-both items-center pt-8 justify-left">
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    <% end %>

    <div class="float-left clear-both" id="messages-end"></div>
  </div>