From 76b2886960c0b227a70eb38d1db768e834f2d7db Mon Sep 17 00:00:00 2001
From: Oleg Chendighelean <oleg.chendighelean@trili.tech>
Date: Fri, 20 Dec 2024 01:22:06 +0000
Subject: [PATCH] Add loader

---
 apps/desktop/public/electron.js               |  4 +--
 apps/desktop/src/Router.tsx                   | 26 +++++--------------
 apps/desktop/src/components/Loader/Loader.tsx | 18 +++++++++++++
 apps/desktop/src/index.tsx                    |  3 ++-
 4 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 apps/desktop/src/components/Loader/Loader.tsx

diff --git a/apps/desktop/public/electron.js b/apps/desktop/public/electron.js
index 0474bf20f..54f0de58e 100644
--- a/apps/desktop/public/electron.js
+++ b/apps/desktop/public/electron.js
@@ -251,9 +251,7 @@ function createWindow() {
   mainWindow.once("ready-to-show", () => {
     mainWindow.show();
 
-    if (backupData) {
-      mainWindow.webContents.send("backupData", backupData);
-    }
+    mainWindow.webContents.send("backupData", backupData);
 
     if (deeplinkURL) {
       mainWindow.webContents.send("deeplinkURL", deeplinkURL);
diff --git a/apps/desktop/src/Router.tsx b/apps/desktop/src/Router.tsx
index 9d388623e..08fd07bc0 100644
--- a/apps/desktop/src/Router.tsx
+++ b/apps/desktop/src/Router.tsx
@@ -1,5 +1,4 @@
 /* istanbul ignore file */
-import { Flex, Spinner } from "@chakra-ui/react";
 import { DynamicModalContext, useDynamicModal } from "@umami/components";
 import { useDataPolling } from "@umami/data-polling";
 import {
@@ -13,6 +12,7 @@ import { useEffect, useState } from "react";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import { AnnouncementBanner } from "./components/AnnouncementBanner";
+import { Loader } from "./components/Loader/Loader";
 import { SocialLoginWarningModal } from "./components/SocialLoginWarningModal/SocialLoginWarningModal";
 import { BeaconProvider } from "./utils/beacon/BeaconProvider";
 import { persistor } from "./utils/persistor";
@@ -85,7 +85,7 @@ const LoggedOutRouter = () => {
     WalletClient.destroy().then(resetBeaconConnections).catch(noop);
   }, [resetBeaconConnections]);
 
-  const [isDataLoading] = useState(
+  const [isDataLoading, setIsDataLoading] = useState(
     () => !localStorage.getItem("migration_2_3_3_to_2_3_4_completed")
   );
 
@@ -98,8 +98,6 @@ const LoggedOutRouter = () => {
 
     if (window.electronAPI) {
       window.electronAPI.onBackupData((_, data) => {
-        console.log("1. Received backup data:", data);
-
         if (data) {
           setTimeout(() => {
             localStorage.clear();
@@ -110,6 +108,9 @@ const LoggedOutRouter = () => {
 
             window.location.reload();
           }, 3000);
+        } else {
+          setIsDataLoading(false);
+          localStorage.setItem("migration_2_3_3_to_2_3_4_completed", "true");
         }
       });
     }
@@ -117,22 +118,7 @@ const LoggedOutRouter = () => {
 
   return (
     <>
-      {isDataLoading && (
-        <Flex
-          position="absolute"
-          zIndex="9999"
-          top="0"
-          left="0"
-          alignItems="center"
-          justifyContent="center"
-          width="full"
-          height="100vh"
-          backdropFilter="blur(10px)"
-          backgroundColor="rgba(0, 0, 0, 0.2)"
-        >
-          <Spinner />
-        </Flex>
-      )}
+      {isDataLoading && <Loader />}
       <HashRouter>
         <Routes>
           <Route element={<Navigate to="/welcome" />} path="/*" />
diff --git a/apps/desktop/src/components/Loader/Loader.tsx b/apps/desktop/src/components/Loader/Loader.tsx
new file mode 100644
index 000000000..953bb30d7
--- /dev/null
+++ b/apps/desktop/src/components/Loader/Loader.tsx
@@ -0,0 +1,18 @@
+import { Flex, Spinner } from "@chakra-ui/react";
+
+export const Loader = () => (
+  <Flex
+    position="absolute"
+    zIndex="9999"
+    top="0"
+    left="0"
+    alignItems="center"
+    justifyContent="center"
+    width="full"
+    height="100vh"
+    backdropFilter="blur(10px)"
+    backgroundColor="rgba(0, 0, 0, 0.2)"
+  >
+    <Spinner />
+  </Flex>
+);
diff --git a/apps/desktop/src/index.tsx b/apps/desktop/src/index.tsx
index 78e58110b..d5238e4ba 100644
--- a/apps/desktop/src/index.tsx
+++ b/apps/desktop/src/index.tsx
@@ -10,6 +10,7 @@ import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 
 import { ErrorPage } from "./components/ErrorPage";
+import { Loader } from "./components/Loader/Loader";
 import { ReactQueryProvider } from "./providers/ReactQueryProvider";
 import { UmamiTheme } from "./providers/UmamiTheme";
 import { Router } from "./Router";
@@ -29,7 +30,7 @@ root.render(
   <StrictMode>
     <UmamiTheme>
       <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor}>
+        <PersistGate loading={<Loader />} persistor={persistor}>
           <ErrorBoundary fallback={<ErrorPage />} onError={logError}>
             <ReactQueryProvider>
               <Router />