Add progress bar to top of page for nicer loading indicator styles

resources/scripts/state/index.ts

@@ -3,12 +3,14 @@ import flashes, { FlashStore } from '@/state/flashes';
 import user, { UserStore } from '@/state/user';
 import permissions, { GloablPermissionsStore } from '@/state/permissions';
 import settings, { SettingsStore } from '@/state/settings';
+import progress, { ProgressStore } from '@/state/progress';
 
 export interface ApplicationStore {
     permissions: GloablPermissionsStore;
     flashes: FlashStore;
     user: UserStore;
     settings: SettingsStore;
+    progress: ProgressStore;
 }
 
 const state: ApplicationStore = {
@@ -16,6 +18,7 @@ const state: ApplicationStore = {
     flashes,
     user,
     settings,
+    progress,
 };
 
 export const store = createStore(state);

resources/scripts/state/progress.ts

@@ -0,0 +1,30 @@
+import { action, Action } from 'easy-peasy';
+
+export interface ProgressStore {
+    continuous: boolean;
+    progress?: number;
+
+    startContinuous: Action<ProgressStore>;
+    setProgress: Action<ProgressStore, number | undefined>;
+    setComplete: Action<ProgressStore>;
+}
+
+const progress: ProgressStore = {
+    continuous: false,
+    progress: undefined,
+
+    startContinuous: action(state => {
+        state.continuous = true;
+    }),
+
+    setProgress: action((state, payload) => {
+        state.progress = payload;
+    }),
+
+    setComplete: action(state => {
+        state.progress = 100;
+        state.continuous = false;
+    }),
+};
+
+export default progress;