refactor: update spinner handling and improve initialization timing

* Modified the Content Security Policy to include 'unsafe-inline' for script-src.
* Changed the spinner display style from 'none' to 'flex' for better visibility.
* Removed the initSpinner function and directly initialized the spinner in useAppInit.
* Added console timing for initialization to track performance.

src/renderer/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="initial-scale=1, width=device-width" />
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
+    content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' 'unsafe-inline' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
   <title>Cherry Studio</title>
 
   <style>
@@ -21,7 +21,7 @@
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      display: none;
+      display: flex;
     }
 
     #spinner img {
@@ -36,6 +36,9 @@
   <div id="spinner">
     <img src="/src/assets/images/logo.png" />
   </div>
+  <script>
+    console.time('init')
+  </script>
   <script type="module" src="/src/init.ts"></script>
   <script type="module" src="/src/entryPoint.tsx"></script>
 </body>

src/renderer/src/hooks/useAppInit.ts

@@ -24,6 +24,11 @@ export function useAppInit() {
   const avatar = useLiveQuery(() => db.settings.get('image://avatar'))
   const { theme } = useTheme()
 
+  useEffect(() => {
+    document.getElementById('spinner')?.remove()
+    console.timeEnd('init')
+  }, [])
+
   useUpdateHandler()
   useFullScreenNotice()
 
@@ -32,7 +37,6 @@ export function useAppInit() {
   }, [avatar, dispatch])
 
   useEffect(() => {
-    document.getElementById('spinner')?.remove()
     runAsyncFunction(async () => {
       const { isPackaged } = await window.api.getAppInfo()
       if (isPackaged && autoCheckUpdate) {

src/renderer/src/init.ts

@@ -5,13 +5,6 @@ import { startNutstoreAutoSync } from './services/NutstoreService'
 import storeSyncService from './services/StoreSyncService'
 import store from './store'
 
-function initSpinner() {
-  const spinner = document.getElementById('spinner')
-  if (spinner) {
-    spinner.style.display = 'flex'
-  }
-}
-
 function initKeyv() {
   window.keyv = new KeyvStorage()
   window.keyv.init()
@@ -34,7 +27,6 @@ function initStoreSync() {
   storeSyncService.subscribe()
 }
 
-initSpinner()
 initKeyv()
 initAutoSync()
 initStoreSync()