Implement spinner for loading of `subjects` accordion

app/components/subject_accordion_component/subject_accordion_component.html.erb

@@ -15,6 +15,11 @@
 
     <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
       <div class="accordion-body pt-1 pb-1" id="<%= accordion_body_id %>">
+        <div class="text-center">
+          <div class="spinner-border text-danger" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
       </div>
     </div>
   </div>

app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb

@@ -5,5 +5,10 @@
   </div>
 
   <div class="offcanvas-body" id="<%= opts[:accordion_body_id] %>">
+    <div class="text-center">
+      <div class="spinner-border text-danger" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
   </div>
 </div>

app/javascript/controllers/subjects_controller.js

@@ -15,12 +15,12 @@ export default class extends ApplicationController {
       params.is_root = true
     }
 
-    console.log(opts)
-
-    $.get("/api/subjects.json", params, function (search_results, status) {
-      if (status === "success") {
-        $this.stimulate("SubjectsReflex#render_subjects_accordion", search_results, opts)
-      }
-    })
+    if ($(opts.accordionTarget).find(".accordion-flash").length === 0) {
+      $.get("/api/subjects.json", params, function (search_results, status) {
+        if (status === "success") {
+          $this.stimulate("SubjectsReflex#render_subjects_accordion", search_results, opts)
+        }
+      })
+    }
   }
 }