chore(standalone/setup): bring back spinner

apps/client/src/setup.css

@@ -109,4 +109,43 @@ body.setup {
             }
         }
     }
+
+    .lds-ring {
+        display: inline-block;
+        position: relative;
+        width: 60px;
+        height: 60px;
+
+        &>div {
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            width: var(--size, 48px);
+            height: var(--size, 48px);
+            margin: 8px;
+            border: 6px solid black;
+            border-radius: 50%;
+            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            border-color: black transparent transparent transparent;
+
+            &:nth-child(1) {
+                animation-delay: -0.45s;
+            }
+            &:nth-child(2) {
+                animation-delay: -0.3s;
+            }
+            &:nth-child(3) {
+                animation-delay: -0.15s;
+            }
+        }
+    }
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }

apps/client/src/setup.tsx

@@ -74,10 +74,21 @@ function SyncInProgress() {
         <div class="page sync-in-progress">
             <h1>{t("setup.sync-in-progress-title")}</h1>
             <p>{t("setup.sync-in-progress-description")}</p>
+            <Spinner />
         </div>
     );
 }
 
+function Spinner() {
+    return (
+        <div class="lds-ring" style="margin-right: 20px;">
+            <div />
+            <div />
+            <div />
+            <div />
+        </div>);
+}
+
 function SyncFromServer({ setState }: { setState: (state: State) => void }) {
     const [serverUrl, setServerUrl] = useState("");
     const [password, setPassword] = useState("");

apps/server/src/assets/views/setup.ejs

@@ -10,42 +10,7 @@
         body {
             /* Prevent the content from being rendered before the main stylesheet loads */
             display: none;
-        }
-        .lds-ring {
-            display: inline-block;
-            position: relative;
-            width: 60px;
-            height: 60px;
-        }
-        .lds-ring div {
-            box-sizing: border-box;
-            display: block;
-            position: absolute;
-            width: 48px;
-            height: 48px;
-            margin: 8px;
-            border: 6px solid black;
-            border-radius: 50%;
-            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-            border-color: black transparent transparent transparent;
-        }
-        .lds-ring div:nth-child(1) {
-            animation-delay: -0.45s;
-        }
-        .lds-ring div:nth-child(2) {
-            animation-delay: -0.3s;
-        }
-        .lds-ring div:nth-child(3) {
-            animation-delay: -0.15s;
-        }
-        @keyframes lds-ring {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
+        }        
     </style>
     <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
@@ -90,13 +55,6 @@
             <h2><%= t("setup.init-in-progress") %></h2>
 
             <div style="display: flex; justify-content: flex-start; margin-top: 20px;">
-                <div class="lds-ring" style="margin-right: 20px;">
-                    <div></div>
-                    <div></div>
-                    <div></div>
-                    <div></div>
-                </div>
-
                 <div style="line-height: 60px;">
                     <p><%= t("setup.redirecting") %></p>
                 </div>