feat: add loading spinner #86

close #86
2024-09-21 21:07:50 +08:00 · 2024-09-21 21:07:50 +08:00 · 13fddc8e7f
commit 13fddc8e7f
parent fa3d7f7f4a
2 changed files with 17 additions and 0 deletions
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -6,9 +6,25 @@
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: *; frame-src * file:" />
+    <style>
+      #spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      #spinner img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+      }
+    </style>
  </head>
  <body>
    <div id="root"></div>
+    <div id="spinner">
+      <img src="/src/assets/images/logo.png" />
+    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@ -21,6 +21,7 @@ export function useAppInit() {
  }, [avatar, dispatch])

  useEffect(() => {
+    document.getElementById('spinner')?.remove()
    runAsyncFunction(async () => {
      const { isPackaged } = await window.api.getAppInfo()
      isPackaged && setTimeout(window.api.checkForUpdate, 3000)