From 746178f16950721c9b27d14c0cc8eb65a33237cb Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 4 Jan 2024 13:18:55 +0100
Subject: [PATCH] Update frontend

---
 .../client/src/components/UpdatingApp.svelte  | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/UpdatingApp.svelte b/packages/client/src/components/UpdatingApp.svelte
index 2843133f2d..7d8d54df45 100644
--- a/packages/client/src/components/UpdatingApp.svelte
+++ b/packages/client/src/components/UpdatingApp.svelte
@@ -4,6 +4,8 @@
   const timeoutMs = 60000 // 1 minute
   const loadTime = Date.now()
 
+  let timedOut = false
+
   async function checkMigrationsFinished() {
     setTimeout(async () => {
       const response = await API.getMigrationStatus()
@@ -11,7 +13,6 @@
         if (loadTime + timeoutMs > Date.now()) {
           return checkMigrationsFinished()
         }
-
         return migrationTimeout()
       }
 
@@ -22,16 +23,39 @@
   checkMigrationsFinished()
 
   function migrationTimeout() {
-    // TODO
-    alert("Something went wrong 💀")
+    timedOut = true
   }
 </script>
 
-<div class="loading">Updating the system...</div>
+<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>
+  {:else}
+    <p class="loading-message timeout">
+      An error occurred. Please try again later.
+    </p>
+  {/if}
+</div>
 
 <style>
   .loading {
     display: flex;
     justify-content: center;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    height: 100vh;
+    margin: 0;
+  }
+  .loading-message {
+    text-align: center;
+    font-size: 18px;
+  }
+  .timeout {
+    color: rgb(196, 46, 46);
   }
 </style>