Format frontend

packages/builder/src/pages/builder/app/updating/[application].svelte

@@ -1,10 +1,9 @@
 <script>
-  import Spinner from "components/common/Spinner.svelte"
   import { redirect, params } from "@roxi/routify"
 
   import { API } from "api"
 
-  const timeoutMs = 60000 // 1 minute
+  const timeoutMs = 180000 // 3 minutes
   const loadTime = Date.now()
 
   let timedOut = false
@@ -31,39 +30,36 @@
   function migrationTimeout() {
     timedOut = true
   }
+
+  $: text = !timedOut ? "System update" : "Something went wrong!"
+  $: subtext = !timedOut
+    ? "Please wait and we will be back in a second!"
+    : "An error occurred, please try again later"
 </script>
 
-<div class="loading">
-  {#if !timedOut}
-    <p class="loading-message">
-      🛠️ We are updating the system. <br />Please wait, we will be back in a
-      second!
-    </p>
-
-    <Spinner size="20" />
-  {:else}
-    <p class="loading-message timeout">
-      An error occurred. Please try again later.
-    </p>
-  {/if}
+<div class="loading" class:timeout={timedOut}>
+  <span class="header">{text}</span>
+  <span class="subtext">{subtext}</span>
 </div>
 
 <style>
   .loading {
     display: flex;
     justify-content: center;
-    align-items: center;
-    justify-content: center;
     flex-direction: column;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-l);
     height: 100vh;
-    margin: 0;
-  }
-  .loading-message {
     text-align: center;
     font-size: 18px;
   }
-  .timeout {
+  .header {
+    font-weight: 700;
+  }
+  .timeout .header {
     color: rgb(196, 46, 46);
   }
+  .subtext {
+    font-size: 16px;
+    color: var(--grey-7);
+  }
 </style>