Add splashscreen and load settings and project structure before app r…

…enders Note that the webkit white background is a pending tauri issue: tauri-apps/tauri#1564
refstudio · Jul 18, 2023 · 0ca777f · 0ca777f
1 parent afee0a4
commit 0ca777f
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 19 deletions.
diff --git a/splashscreen.html b/splashscreen.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/splash.tsx"></script>
+  </body>
+</html>
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -7,6 +7,16 @@ fn get_environment_variable(name: &str) -> String {
     std::env::var(name).unwrap_or_else(|_| "".to_string())
 }
 
+#[tauri::command]
+async fn close_splashscreen(window: tauri::Window) {
+    // Close splashscreen
+    if let Some(splashscreen) = window.get_window("splashscreen") {
+        splashscreen.close().unwrap();
+    }
+    // Show main window
+    window.get_window("main").unwrap().show().unwrap();
+}
+
 use dotenv::dotenv;
 use std::env;
 
@@ -27,12 +37,16 @@ fn main() {
             {
                 let dev_tools_visible = env::var("DEV_TOOLS").is_ok();
                 if dev_tools_visible {
+                    _app.get_window("splashscreen").unwrap().open_devtools();
                     _app.get_window("main").unwrap().open_devtools();
                 };
             }
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![get_environment_variable])
+        .invoke_handler(tauri::generate_handler![
+            close_splashscreen,
+            get_environment_variable
+        ])
         .menu(core::menu::AppMenu::get_menu(&context))
         .on_menu_event(core::menu::AppMenu::on_menu_event)
         .run(context)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -63,7 +63,15 @@
         "width": 1280,
         "height": 800,
         "maximized": true,
-        "fileDropEnabled": false
+        "fileDropEnabled": false,
+        "visible": false
+      },
+      {
+        "width": 640,
+        "height": 400,
+        "decorations": false,
+        "url": "splashscreen.html",
+        "label": "splashscreen"
       }
     ]
   }

diff --git a/src/application/App.tsx b/src/application/App.tsx
@@ -13,10 +13,6 @@ import { AIPanel } from '../features/ai/AIPanel';
 import { ReferencesDropZone } from '../features/references/components/ReferencesDropZone';
 import { ReferencesPanel } from '../features/references/sidebar/ReferencesPanel';
 import { useDebouncedCallback } from '../hooks/useDebouncedCallback';
-import { ensureProjectFileStructure } from '../io/filesystem';
-import { notifyInfo } from '../notifications/notifications';
-import { interceptConsoleMessages } from '../notifications/notifications.console';
-import { initSettings } from '../settings/settingsManager';
 import { SettingsModalOpener } from '../settings/SettingsModalOpener';
 import { ApplicationFrame } from '../wrappers/ApplicationFrame';
 import { ContextMenus } from '../wrappers/ContextMenus';
@@ -25,18 +21,8 @@ import { CommandPalette } from './CommandPalette';
 import { MainPanel } from './components/MainPanel';
 import { ExplorerPanel } from './sidebar/ExplorerPanel';
 
-// Note: Intercepting INFO, WARN and ERROR console.*
-interceptConsoleMessages(true, true, true);
-
 function App() {
-  useEffectOnce(() => {
-    notifyInfo('Application Startup');
-    void ensureProjectFileStructure()
-      .then(initSettings)
-      .then(() => {
-        emitEvent('refstudio://references/load');
-      });
-  });
+  useEffectOnce(() => emitEvent('refstudio://references/load'));
 
   const handleLayoutUpdate = useDebouncedCallback(
     useCallback(() => emitEvent('refstudio://layout/update'), []),

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,20 +1,54 @@
 import './index.css';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
 import { Provider } from 'jotai';
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './application/App';
+import { useAsyncEffect } from './hooks/useAsyncEffect';
+import { ensureProjectFileStructure } from './io/filesystem';
+import { noop } from './lib/noop';
+import { notifyInfo } from './notifications/notifications';
+import { interceptConsoleMessages } from './notifications/notifications.console';
+import { initSettings } from './settings/settingsManager';
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Provider>
       <QueryClientProvider client={queryClient}>
-        <App />
+        <AppStartup />
       </QueryClientProvider>
     </Provider>
   </React.StrictMode>,
 );
+
+function AppStartup() {
+  const [initialized, setInitialized] = useState(false);
+
+  useAsyncEffect(
+    async () => {
+      // Note: Intercepting INFO, WARN and ERROR console.*
+      interceptConsoleMessages(true, true, true);
+
+      notifyInfo('Application Startup');
+      await initSettings();
+      await ensureProjectFileStructure();
+      await invoke('close_splashscreen');
+      notifyInfo('Application Initialized');
+
+      setInitialized(true);
+    },
+    noop,
+    [setInitialized],
+  );
+
+  if (!initialized) {
+    return null;
+  }
+
+  return <App />;
+}
diff --git a/src/splash.tsx b/src/splash.tsx
@@ -0,0 +1,12 @@
+import './index.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { WelcomeView } from './application/views/WelcomeView';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <WelcomeView className="h-screen bg-white" hideShortcuts />
+  </React.StrictMode>,
+);
diff --git a/vite.config.ts b/vite.config.ts
@@ -23,6 +23,13 @@ export default defineConfig(async () => ({
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     // produce sourcemaps for debug builds
     sourcemap: !!process.env.TAURI_DEBUG,
+
+    rollupOptions: {
+      input: {
+        index: './index.html',
+        splashscreen: './splashscreen.html',
+      },
+    },
   },
   test: {
     coverage: {