better handle 503 errors

resources/js/components/SMPage.vue

@@ -16,11 +16,18 @@
                 <p v-else-if="pageError == 404">
                     The page you are looking for does not exist!
                 </p>
+                <p v-else-if="pageError == 503">
+                    The server is currently not responding and maybe under
+                    maintenance. Please try again later!
+                </p>
                 <p v-else>
                     We are working to fix that what was broken. Please try again
                     later!
                 </p>
-                <SMButton label="Go Back" @click="handleClick" />
+                <SMButton
+                    v-if="pageError != 503"
+                    label="Go Back"
+                    @click="handleClick" />
             </div>
         </SMContainer>
     </template>

resources/js/helpers/api.ts

@@ -1,4 +1,5 @@
 import { useUserStore } from "../store/UserStore";
+import { useApplicationStore } from "../store/ApplicationStore";
 import { ImportMetaExtras } from "../../../import-meta";
 
 interface ApiProgressData {
@@ -155,6 +156,7 @@ export const api = {
                     if (xhr.status < 300) {
                         resolve(result);
                     } else {
+                        useApplicationStore().unavailable = true;
                         reject(result);
                     }
                 };
@@ -211,6 +213,7 @@ export const api = {
                         };
 
                         if (response.status >= 300) {
+                            useApplicationStore().unavailable = true;
                             reject(result);
                         }
 

resources/js/store/ApplicationStore.ts

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 type ApplicationStoreEventKeyUpCallback = (event: KeyboardEvent) => boolean;
 
 export interface ApplicationStore {
+    unavailable: boolean;
     dynamicTitle: string;
     eventKeyUpStack: ApplicationStoreEventKeyUpCallback[];
     pageLoaderTimeout: number;
@@ -12,6 +13,7 @@ export interface ApplicationStore {
 export const useApplicationStore = defineStore({
     id: "application",
     state: (): ApplicationStore => ({
+        unavailable: false,
         dynamicTitle: "",
         eventKeyUpStack: [],
         pageLoaderTimeout: 0,

resources/js/views/App.vue

@@ -3,14 +3,17 @@
         <SMNavbar />
     </header>
     <main>
-        <router-view v-slot="{ Component }">
-            <component :is="Component" />
-        </router-view>
+        <SMPage v-if="useApplicationStore().unavailable" :page-error="503" />
+        <template v-else>
+            <router-view v-slot="{ Component }">
+                <component :is="Component" />
+            </router-view>
+        </template>
     </main>
     <footer>
         <SMPageFooter />
     </footer>
-    <div id="sm-page-loading">
+    <div v-if="!useApplicationStore().unavailable" id="sm-page-loading">
         <SMLoadingIcon large />
     </div>
     <SMToastList />
@@ -23,6 +26,7 @@ import SMPageFooter from "../components/SMPageFooter.vue";
 import SMToastList from "../components/SMToastList.vue";
 import SMDialogList from "../components/SMDialog";
 import SMLoadingIcon from "../components/SMLoadingIcon.vue";
+import { useApplicationStore } from "../store/ApplicationStore";
 </script>
 
 <style lang="scss">