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-childpseudoselectors. 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.
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.
Yep, that stands to reason since the CSS is based on the number of trs.
You can always use JS to hide if empty. If you don’t want to resort to JS you’ll have to try another method from this thread.
However, since you say you only have one page, you possibly don’t need a stream at all. If you hold all the articles in state then your original code (from the other thread) will work and this problem goes away. Streams are only necessary if you have very large amounts of data of an unknown size.
Yeah, when I first had the idea, I had <ul>/<ol> and <li> elements in mind where it would be much less of an issue or even desired behavior. I ended up applying the idea to the .table core component purely out of convenience since that was what was available in a newly generated Phoenix app.