Render list of users once and re-use template for every session

This dramatically speeds up rendering with many translators.

app/javascript/controllers/filteredlist_controller.js

@@ -16,6 +16,21 @@ export default class extends Controller {
   }
 
   expand() {
+    if(this.listTarget.children.length == 0) {
+      const conference = this.element.dataset.conference;
+      const session = this.element.dataset.session;
+      const url = `/conferences/${conference}/sessions/${session}/assignments`;
+
+      const template = document.getElementById("template_filteredlist_options").content;
+      const clone = document.importNode(template, true);
+      clone.querySelectorAll("a.add_button").forEach(el => {
+        el.setAttribute("href", `${url}?user_id=${el.dataset.user}`);
+        el.setAttribute("data-turbo-frame",
+          this.element.closest('turbo-frame[data-controller="session"]').id);
+      });
+      this.listTarget.appendChild(clone);
+    }
+
     this.listTarget.classList.remove("hidden");
     this.inputTarget.classList.remove("rounded-b-md");
     this.filter_nodebounce();

app/views/assignments/_filteredlist.html.erb

-<div data-controller="filteredlist">
+<div data-controller="filteredlist" data-conference="<%= session.conference.slug %>" data-session="<%= session.ref_id %>">
   <div class="relative">
     <input
       type="text"
@@ -16,7 +16,7 @@
   </div>
   <ul data-filteredlist-target="list" class="hidden max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2">
     <% users.each do |user| %>
-      <%= render partial: 'assignments/filteredlist_option', locals: { session: session, user: user } %>
+      <%= render partial: 'assignments/filteredlist_option', locals: { user: } %>
     <% end %>
   </ul>
 </div>

app/views/assignments/_filteredlist_option.html.erb

@@ -2,5 +2,5 @@
   data-filteredlist-match="<%= user.name.downcase %>"
   data-turbo-track="dynamic"
 >
-  <%= render partial: 'assignments/user_add', locals: { user: user, session: session } %>
+  <%= render partial: 'assignments/user_add', locals: { user: } %>
 </li>

app/views/assignments/_user_add.html.erb

@@ -4,7 +4,7 @@
 <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>">
   <span style="color: <%= user.text_color %>"><%= user.name %></span>
   <button type="button" class="group relative -mr-1 size-3.5 rounded-sm hover:bg-gray-500/20">
-    <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session), action: "filteredlist#contract" } do %>
+    <%= link_to "", class: "add_button", data: { turbo_method: :post, user: user.id } do %>
       <span class="sr-only">Add</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" stroke-width="1" class="size-3.5 stroke-gray-600/50 group-hover:stroke-gray-600/75 fill-gray-600/50" style="stroke: <%= user.text_color %>; fill: <%= user.text_color %>">
         <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />

app/views/conferences/show.html.erb

@@ -8,6 +8,11 @@ current_time = Time.zone.now.in_time_zone(@conference.time_zone)
 #current_time = @sessions_by_date[@conference.days.first].first.starts_at.advance(minutes: 5)
 %>
 <%= turbo_stream_from @conference %>
+<template class="hidden" id="template_filteredlist_options">
+  <% @users.each do |user| %>
+    <%= render partial: 'assignments/filteredlist_option', locals: { user: } %>
+  <% end %>
+</template>
 <div>
   <div>
     <a href="#now" onclick="document.querySelector('#now')?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); return false" class="underline text-blue-500">Jump to current time</a>

app/views/sessions/_session.html.erb

@@ -85,6 +85,7 @@
     </div>
     <hr>
     <small>unassigned (<%= unassigned_users.length %>)</small>
-    <%= render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
+    <%= render partial: 'assignments/filteredlist', locals: { session: session, users: [] } %>
+    </div>
   </div>
 <% end %>