Add blur on submit to collection controller

app/frontend/javascript/controllers/collection_controller.js

@@ -1,8 +1,8 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="collection"
 export default class extends Controller {
-static classes = [ "unselected", "selected" ]
+  static classes = ["unselected", "selected"];
   connect() {
     this.element.addEventListener("change", (event) => {
       const { type } = event.target;
@@ -22,34 +22,43 @@ static classes = [ "unselected", "selected" ]
     });
     this.element.addEventListener("input", (event) => {
       if (event.target.type === "text") {
-        this.debouncedSubmit()
+        this.debouncedSubmit();
       }
-    })
+    });
   }
 
   submitForm() {
-     this.element.requestSubmit()
+    this.blurOldResults();
+    this.element.requestSubmit();
   }
 
   debouncedSubmit() {
-    clearTimeout(this.timeout)
+    clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
-      this.submitForm()
-    }, 400)
+      this.submitForm();
+    }, 400);
   }
 
   toggleClass(el) {
-    const button = el.closest("label")
-    if (!button || !this.selectedClasses)  return
+    const button = el.closest("label");
+    if (!button || !this.selectedClasses) return;
 
     // Toggle selected classes
-    this.selectedClasses.forEach(cls => {
-      button.classList.toggle(cls)
-    })
+    this.selectedClasses.forEach((cls) => {
+      button.classList.toggle(cls);
+    });
 
     // Toggle unselected classes
-    this.unselectedClasses.forEach(cls => {
-      button.classList.toggle(cls)
-    })
+    this.unselectedClasses.forEach((cls) => {
+      button.classList.toggle(cls);
+    });
+  }
+
+  blurOldResults() {
+    const elements = document.querySelectorAll(".blur-on-submit");
+
+    elements.forEach((el) => {
+      el.classList.add("blur-sm");
+    });
   }
 }

app/views/resources/resource_results.html.erb

@@ -1,8 +1,9 @@
 <%= turbo_frame_tag :resource_results do %>
   <%= turbo_stream.replace("resource_count", partial: "resource_count") %>
   <%= turbo_stream.replace("copy_url", partial: "shared/copy_url") %>
+
   <% if @resources.any? %>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade blur-on-submit">
       <% @resources.each do |resource| %>
         <%= render "resource_card", resource: resource.decorate %>
       <% end %>

app/views/workshops/workshop_results.html.erb

@@ -7,7 +7,7 @@
 
   <div class="mt-6">
     <% if @workshops.any? %>
-      <div id="workshops-list" class="space-y-4 animate-fade">
+      <div id="workshops-list" class="space-y-4 animate-fade blur-on-submit">
         <% @workshops.each do |workshop| %>
           <%= render "workshops/index_row", workshop: workshop.decorate,
                    breadcrumb: "Workshops", link_route: workshop_path(workshop) %>