fix: reduce screen flash with different background colors when app starts, closes #1915 (#1922)

2025-08-29 02:02:53 +08:00
parent 1b00d8c41c
commit 267fe58a8c
4 changed files with 19 additions and 26 deletions
@@ -6,6 +6,7 @@ extern crate cocoa;
 #[macro_use]
 extern crate objc;

+use tauri::utils::config::BackgroundThrottlingPolicy;
 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;

@@ -240,7 +241,8 @@ pub fn run() {
                eprintln!("Failed to initialize tauri_plugin_log: {e}");
            };

-            let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default());
+            let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
+                .background_throttling(BackgroundThrottlingPolicy::Disabled);

            #[cfg(desktop)]
            let win_builder = win_builder.inner_size(800.0, 600.0).resizable(true);
@@ -37,7 +37,6 @@ export const viewport = {
  maximumScale: 1,
  userScalable: false,
  viewportFit: 'cover',
-  themeColor: 'white',
 };

 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -45,6 +44,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
    <html>
      <head>
        <title>{title}</title>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              const themeMode = localStorage.getItem('themeMode');
+              const themeColor = localStorage.getItem('themeColor');
+              if (themeMode && themeColor) {
+                document.documentElement.setAttribute('data-theme', \`\${themeColor}-\${themeMode}\`);
+              }
+            `,
+          }}
+        />
        <meta
          name='viewport'
          content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
@@ -618,18 +618,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
    setShowDetailsBook(book);
  };

-  if (!appService || !insets) {
-    return null;
-  }
-
-  if (checkOpenWithBooks || checkLastOpenBooks) {
-    return (
-      loading && (
-        <div className='fixed inset-0 z-50 flex items-center justify-center'>
-          <Spinner loading />
-        </div>
-      )
-    );
+  if (!appService || !insets || checkOpenWithBooks || checkLastOpenBooks) {
+    return <div className='bg-base-200 inset-0 flex h-[100vh] items-center justify-center'></div>;
  }

  return (
@@ -740,9 +730,7 @@ const LibraryPage = () => {
  return (
    <Suspense
      fallback={
-        <div className='fixed inset-0 z-50 flex items-center justify-center'>
-          <Spinner loading />
-        </div>
+        <div className='bg-base-200 inset-0 flex h-[100vh] items-center justify-center'></div>
      }
    >
      <LibraryPageWithSearchParams />
@@ -1,14 +1,7 @@
 'use client';

-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import LibraryPage from './library/page';

 export default function HomePage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.replace('/library');
-  }, [router]);
-
-  return null;
+  return <LibraryPage />;
 }