Absolutely. I’ve pasted the code below. It’s pretty much the same as what I initially posted, but I changed the HTML to more closely reflect my production code, just in case that mattered.
I do not have IDs on each row. However, I just tried that locally and it made no difference.
It may be useful to know that if you watch the DOM being built in the “Elements” view of your dev tools, that you can see the outer div of each row (<div class="released-task complete">) being created, then there’s the 20ish second pause, then the internals of each row appear.
defmodule ReadyroomWeb.Speriment do
use Phoenix.LiveView
def render(assigns) do
use Phoenix.HTML
~L"""
<div class="container mb-3" style="max-width: 90%;">
<form id="filter-form" phx-change="filter">
<%= text_input(:filter, :value, value: @filter_value, class: "form-control my-5", placeholder: "filter by", phx_debounce: "1000") %>
</form>
<div id="released-tasks" class="released-tasks download-hook" phx-hook="InspectorView">
<%= for task <- @renderable do %>
<div class="released-task complete">
<div class="released-meta">
<div class="released-meta-grid">
<i class="fas fa-chevron-right"></i><div><%= task %></div>
<i class="fas fa-user"></i><div data-toggle="tooltip" title="Requested by"><%= "Some User" %></div>
<i class="fas fa-clock"></i><div class='local-time' data-toggle="tooltip" title="Requested at"><%= NaiveDateTime.utc_now() |> NaiveDateTime.truncate(:second) %></div>
<i class="far fa-clock"></i><div class='local-time' data-toggle="tooltip" title="Fulfilled at"><%= NaiveDateTime.utc_now() |> NaiveDateTime.truncate(:second) %></div>
<i class="fas fa-check"></i>
<span>Complete</span>
</div>
</div>
<div class="released-content">
<div class="released-title"><%= "This is the request: #{task}" %></div>
<div class="released-response">
<strong class="mr-2 text-info">Response:</strong><span><%= "This is the response: #{task}" %></span>
</div>
</div>
<div class="released-files uploads">
<table class="table table-borderless table-sm table-hover uploads">
<tbody>
<tr>
<td> Filename </td>
<td> File Length </td>
<td class="nowrap">
<a href="#" >
<i class="fas fa-long-arrow-alt-down"></i> A non-working download link
</a>
</td>
<td align="right">
<span class="file-size nowrap">File Size</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<% end %>
</div>
</div>
"""
end
def mount(_params, _session, socket) do
data = 0..200
{:ok, assign(socket, filter_value: 1, data: data, renderable: data)}
end
def handle_event("filter", %{"filter" => %{"value" => ""}}, socket) do
handle_event("filter", %{"filter" => %{"value" => "1"}}, socket)
end
def handle_event("filter", %{"filter" => %{"value" => filter}}, socket) do
renderable = Enum.filter(socket.assigns.data, &(rem(&1, String.to_integer(filter)) == 0))
{:noreply, assign(socket, renderable: renderable, filter_value: filter)}
end
end
