Merge pull request #87 from flukexp/splash-screen

Added splash screen for initial load in tauri
semperai · Apr 7, 2024 · 297d3bc · 297d3bc
2 parents b5df2e5 + bb4e154
commit 297d3bc
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "test:ci": "jest --ci --reporters='./github-actions-reporter.js'",
     "act": "act -j test",
     "tauri": "tauri",
-    "generate:paths": "npx node scripts/generate_paths.js"
+    "generate:paths": "npx node scripts/generate_paths.js",
+    "splash": "cp ./public/splashscreen.html out/"
   },
   "dependencies": {
     "@charcoal-ui/icons": "^2.6.0",
@@ -46,7 +47,7 @@
   },
   "devDependencies": {
     "@gltf-transform/core": "^2.4.6",
-    "@tauri-apps/api": "^1.5.2",
+    "@tauri-apps/api": "^1.5.3",
     "@tauri-apps/cli": "^1.5.8",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",

diff --git a/public/splashscreen.html b/public/splashscreen.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Splash Screen</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      overflow: hidden;
+    }
+    .splash-container {
+      position: relative;
+      width: 200px; 
+      height: 200px; 
+    }
+    .splash-logo {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url('logo.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      border-radius: 50%;
+    }
+    .loading-indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      animation: spin 1s linear infinite; 
+      border: 4px solid transparent; 
+      border-top-color: #ff00dd; 
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); border-top-color: #ff00dd; } 
+      25% { border-top-color: #e91e63; } 
+      50% { border-top-color: #140f08; } 
+      75% { border-top-color: #ffeb3b; } 
+      100% { transform: rotate(360deg); border-top-color: #ff00dd; } 
+    }
+  </style>
+</head>
+<body>
+  <div class="splash-container">
+    <div class="splash-logo"></div>
+    <div class="loading-indicator"></div>
+  </div>
+</body>
+</html>
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -10,6 +10,14 @@ use tauri::{
 };
 use tauri::Manager;
 
+#[tauri::command]
+async fn close_splashscreen(window: tauri::Window) {
+  // Close splashscreen
+  window.get_window("splashscreen").expect("no window labeled 'splashscreen' found").close().unwrap();
+  // Show main window
+  window.get_window("main").expect("no window labeled 'main' found").show().unwrap();
+}
+
 
 fn main() {
   tauri::Builder::default()
@@ -39,6 +47,7 @@ fn main() {
       }
       _ => {}
     })
+    .invoke_handler(tauri::generate_handler![close_splashscreen])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "build": {
-    "beforeBuildCommand": "npm run build && npm run export",
+    "beforeBuildCommand": "npm run build && npm run export && npm run splash",
     "beforeDevCommand": "npm run dev",
     "devPath": "http://localhost:3000",
     "distDir": "../out"
@@ -68,7 +68,19 @@
         "fullscreen": false,
         "resizable": true,
         "title": "Amica",
-        "transparent": true
+        "transparent": true,
+        "visible": false,
+        "label": "main"
+      },
+      {
+        "fullscreen": false,
+        "transparent": true,
+        "resizable": false,
+        "width": 400,
+        "height": 215,
+        "decorations": false,
+        "url": "/splashscreen.html",
+        "label": "splashscreen"
       }
     ]
   }

diff --git a/src/components/vrmDemo.tsx b/src/components/vrmDemo.tsx
@@ -12,6 +12,7 @@ export default function VrmDemo({
   onLoaded?: () => void,
   onError?: () => void,
 }) {
+
   const { viewer } = useContext(ViewerContext);
   const [isLoading, setIsLoading] = useState(true);
   const [loadingError, setLoadingError] = useState(false);

diff --git a/src/components/vrmViewer.tsx b/src/components/vrmViewer.tsx
@@ -2,6 +2,9 @@ import { useContext, useCallback, useState } from "react";
 import { ViewerContext } from "@/features/vrmViewer/viewerContext";
 import { buildUrl } from "@/utils/buildUrl";
 import { config } from "@/utils/config";
+import isTauri from "@/utils/isTauri";
+import { invoke } from "@tauri-apps/api/tauri";
+
 
 export default function VrmViewer() {
   const { viewer } = useContext(ViewerContext);
@@ -24,11 +27,13 @@ export default function VrmViewer() {
         .then(() => {
           console.log("vrm loaded");
           setIsLoading(false);
+          if (isTauri()) invoke("close_splashscreen");
         })
         .catch((e) => {
           console.error("vrm loading error", e);
           setLoadingError(true);
           setIsLoading(false);
+          if (isTauri()) invoke("close_splashscreen");
         });