modified: .gitignore

resources/js/Composables/useGlobalLoading.js

@@ -0,0 +1,45 @@
+import {computed, ref} from "vue";
+
+const pending = ref(0)
+const visible = ref(false)
+let showTimer = null
+
+const SHOW_DELAY_MS = 3000
+
+const scheduleShow = () => {
+    if (visible.value || showTimer) return
+
+    showTimer = setTimeout(() => {
+        showTimer = null
+        if (pending.value > 0) {
+            visible.value = true
+        }
+    }, SHOW_DELAY_MS)
+}
+
+const cancelScheduledShow = () => {
+    if (!showTimer) return
+    clearTimeout(showTimer)
+    showTimer = null
+}
+
+export const startGlobalLoading = () => {
+    pending.value += 1
+    scheduleShow()
+}
+
+export const stopGlobalLoading = () => {
+    pending.value = Math.max(0, pending.value - 1)
+
+    if (pending.value === 0) {
+        cancelScheduledShow()
+        visible.value = false
+    }
+}
+
+export const useGlobalLoading = () => {
+    return {
+        isGlobalLoading: computed(() => visible.value),
+        pendingCount: computed(() => pending.value),
+    }
+}