app/assets/lookbook/js/app.js in lookbook-1.0.8 vs app/assets/lookbook/js/app.js in lookbook-1.1.0

@@ -3,14 +3,24 @@
 import { fetchHTML } from "./helpers/request";
 import { isExternalLink } from "./helpers/dom";
 
 export default function app() {
   return {
+    _requestsInProgress: 0,
+
     version: Alpine.$persist("").as("lookbook-version"),
 
     location: window.location,
 
+    get sidebarHidden() {
+      return this.$store.layout.sidebar.hidden;
+    },
+
+    get loading() {
+      return this._requestsInProgress > 0;
+    },
+
     init() {
       if (window.SOCKET_PATH) {
         console.log("SOCKET CREATED");
         const socket = createSocket(window.SOCKET_PATH);
         socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
@@ -40,17 +50,19 @@
     },
 
     async updateDOM() {
       this.debug("Starting DOM update");
       this.$dispatch("dom:update-start");
+      this.requestStart();
       try {
         const { fragment, title } = await fetchHTML(
           window.location,
           `#${this.$root.id}`
         );
         morph(this.$root, fragment);
         document.title = title;
+        this.requestEnd();
         this.$dispatch("dom:update-complete");
         this.debug("DOM update complete");
       } catch (err) {
         this.error(err);
         window.location.reload();
@@ -65,11 +77,17 @@
       if (this.$store.layout.mobile && !this.sidebarHidden) {
         this.toggleSidebar();
       }
     },
 
-    get sidebarHidden() {
-      return this.$store.layout.sidebar.hidden;
+    requestStart() {
+      this._requestsInProgress += 1;
+    },
+
+    requestEnd() {
+      if (this._requestsInProgress > 0) {
+        this._requestsInProgress -= 1;
+      }
     },
 
     ...Alpine.$log,
   };
 }