Stream empty state - is there a way to check when a stream is empty?

If you know factually that the data is empty on the server, perhaps set an empty_data: true assign that guards the empty message in the template?

I thought about it, but I was wondering if there was a way to avoid implementing additional checks, only using the stream.

There’s not, because without additional constraints there’s no way to know the current state of the stream on the server as it is observed on the client.

if you have infinite scrolling, then you necessarily have pagination for next/previous page, no? Then you can toggle an empty state assign as other have alluded to when you hit no results without having to check the existing stream contents.

Thinking out loud, this could be a good use case for the :first-child or :last-child pseudoselectors. This will let the browser determine how to display the empty list message based on whether there are any other streamed elements rendered.

I got an example working by adding the following line to the .table core component as the first <tr> before the streamed ones. You could also add it to the end and use the :first-child pseudoselector instead.

          <tr class="hidden last:table-row"><td>No Streamed Items</td></tr>

https://github.com/codeanpeace/live_cal/commit/cbdda424d6d352af9c240734c334207016651d4b

Yeah, you’re right, that shouldn’t be an issue, using something like the end_of_timeline? assign in the docs.

Oh nice idea! I tried to do something with the :empty pseudoselector, but it’s sensible to whitespace which makes it hard to have something generic.

I have no pagination at all on my articles index template. I tried to apply your fix, but the message is displayed after deleting a single item and even if there is at least 1 item left.

Screenshot 2023-08-01 at 16.21.361818×518 24.8 KB

What does the code look like?

You would need something like this:

<ul>
  <li class="first:hidden">No articles</li>
  <li :for={article <- @streams.articles}>
    <%= article.body %>
  </li>
</ul>

Ah, no, I just modified the core_components.ex, function table/1 by adding a single line as you did in your GitHub repo:

<tr class="hidden last:table-row"><td>No Streamed Items</td></tr>`

In my index template the code to display items looks like that:

<.table
    id="articles"
    rows={@streams.articles}
    row_click={fn {_id, article} -> JS.navigate(~p"/articles/#{article}") end}
  >
    <:col :let={{_id, article}} label="Title"><%= article.title %></:col>
    <:col :let={{_id, article}} label="Content">
      <%= String.slice(article.content, 0, 200) %>
    </:col>
    <:action :let={{_id, article}}>
      <div class="sr-only">
        <.link navigate={~p"/articles/#{article}"}>Show</.link>
      </div>
      <.link patch={~p"/articles/#{article}/edit"}>Edit</.link>
    </:action>
    <:action :let={{id, article}}>
      <.link
        phx-click={JS.push("delete", value: %{id: article.id}) |> hide("##{id}")}
        data-confirm="Are you sure?"
      >
        Delete
      </.link>
    </:action>
  </.table>

I was redirected here from this thread

I’m not @codeanpeace, I’m from that other thread and just butting in since we were talking there

The important bit to see is where you put it in the table component. Is it possible you put it outside the tbody or something or maybe have other modifications that would result in there being more than tr left even when there are no articles? I would inspect the DOM after deleting the last one and ensure there is only one tr left.