Making HTML disappear on assign change

Phoenix Forum Questions / Help
, ,
1

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>
2

I feel like that should work. Is @typing coming through as an atom (i.e. true/false) or a string?

This is more efficient:


      <div id="typing-indicator" class="flex clear-both items-center pt-8 justify-left data-[typing=false]:hidden" data-typing={Atom.to_string(@typing)}>
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    <% end %>
4 Likes
3

That did it! Thank you. And now I’ve learned a new trick.

4

This is actually a limitation of streams: if you render a non-stream item, that is any element that is not part of the list of items passed to stream/4 with a corresponding DOM ID, inside a stream container, such an item will never be removed. See also Phoenix.LiveView — Phoenix LiveView v1.0.5

2 Likes