Dynamically Hide and Show Loading Spinner

Add the loadingOverlay target to the seats controller, and route the document-wide global events named turbolinks:request-start and turbolinks:load to the seats#loadingStarted and seats#loadingFinished actions respectively.

When handling turbolinks:request-start and turbolinks:load events, only hide and show the loading indicator when we’re discarding our map element, since it’s persisted across navigations when the data-turbolinks-permanent attribute is present.

The CSS class that visually indicates a loading state is .is-loading. This class is passed as the [data-seats-loading-class] attribute on the [data-controller="seats"] element in the seats/index template. Once declared as such, that value is available through Stimulus’ Data Maps interface.

Desktop

loading-spinner-on-nav


      app/javascript/controllers/seats_controller.js

diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
index d953e65..abddaf1 100644
--- a/app/javascript/controllers/seats_controller.js
+++ b/app/javascript/controllers/seats_controller.js
@@ -3,6 +3,7 @@ import svgPanZoom from "svg-pan-zoom"
 
 export default class extends Controller {
   static targets = [
+    "loadingOverlay",
     "map",
   ]
 
@@ -18,7 +19,7 @@ export default class extends Controller {
   }
 
   disconnect() {
-    if (!this.mapTarget.hasAttribute("data-turbolinks-permanent")) {
+    if (this.isDiscardingMap) {
       this.map.destroy()
     }
   }
@@ -27,6 +28,10 @@ export default class extends Controller {
     this.mapTarget.removeAttribute("data-turbolinks-permanent")
   }
 
+  get isDiscardingMap() {
+    return !this.mapTarget.hasAttribute("data-turbolinks-permanent")
+  }
+
   zoomIn() {
     this.map.zoomIn()
   }
@@ -34,4 +39,14 @@ export default class extends Controller {
   zoomOut() {
     this.map.zoomOut()
   }
+
+  loadingStarted() {
+    if (this.isDiscardingMap) {
+      this.loadingOverlayTarget.classList.add(this.data.get("loadingClass"))
+    }
+  }
+
+  loadingFinished() {
+    this.loadingOverlayTarget.classList.remove(this.data.get("loadingClass"))
+  }
 }


      app/views/seats/index.html.erb

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 12c3744..8f6b7e2 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -8,6 +8,7 @@
   <section
     class="syos-frame"
     data-controller="seats"
+    data-seats-loading-class="is-loading"
   >
     <div class="syos-frame__map">
       <nav class="syos-frame__floor-nav syos-floor-nav">
@@ -80,7 +81,12 @@
       </div>
 
       <div
-        class="syos-frame__map-overlay syos-loader-overlay is-loading"
+        class="syos-frame__map-overlay syos-loader-overlay"
+        data-target="seats.loadingOverlay"
+        data-action="
+          turbolinks:request-start@document->seats#loadingStarted
+          turbolinks:load@document->seats#loadingFinished
+        "
         aria-hidden="true"
         >
         <%= inline_svg_tag(