feat: improve splash screen by adding min duration and transition

Author: carlassmann

solo.yml

@@ -1,5 +1,5 @@
 name: tilly
-icon: null
+icon: public/apple-touch-icon.png
 processes:
   Jazz Sync Server:
     command: bunx jazz-run sync

src/app/components/splash-screen.tsx

@@ -1,17 +1,75 @@
+import { useEffect, useState } from "react"
+import { AnimatePresence, motion } from "motion/react"
 import { TypographyH1 } from "#shared/ui/typography"
-import { motion } from "motion/react"
 
-export function SplashScreen() {
+export { SplashScreen, SplashScreenStatic, useSplashDelay }
+
+declare global {
+	interface Window {
+		__pageLoadTime?: number
+	}
+}
+
+function useSplashDelay(minDurationMs = 700) {
+	let [ready, setReady] = useState(() => {
+		let loadTime = window.__pageLoadTime ?? Date.now()
+		let elapsed = Date.now() - loadTime
+		return elapsed >= minDurationMs
+	})
+
+	useEffect(() => {
+		if (ready) return
+
+		let loadTime = window.__pageLoadTime ?? Date.now()
+		let elapsed = Date.now() - loadTime
+		let remaining = Math.max(0, minDurationMs - elapsed)
+
+		let timer = setTimeout(() => setReady(true), remaining)
+		return () => clearTimeout(timer)
+	}, [minDurationMs, ready])
+
+	return ready
+}
+
+function SplashScreenStatic() {
+	useEffect(() => {
+		document.getElementById("splash")?.remove()
+	}, [])
+
 	return (
 		<div className="flex min-h-screen flex-col items-center justify-center gap-4">
-			<motion.img
-				src="/app/icons/icon-192x192.png"
-				className="size-24 rounded-lg"
-				layoutId="logo"
-			/>
-			<motion.div layoutId="title">
-				<TypographyH1>Tilly</TypographyH1>
-			</motion.div>
+			<img src="/app/icons/icon-192x192.png" className="size-24 rounded-lg" />
+			<TypographyH1>Tilly</TypographyH1>
 		</div>
 	)
 }
+
+function SplashScreen({ show }: { show?: boolean }) {
+	return (
+		<AnimatePresence>
+			{show !== false && (
+				<motion.div
+					className="bg-background fixed inset-0 z-50 flex min-h-screen flex-col items-center justify-center gap-4"
+					initial={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+					transition={{ duration: 0.3, ease: "easeOut" }}
+				>
+					<motion.img
+						src="/app/icons/icon-192x192.png"
+						className="size-24 rounded-lg"
+						layoutId="logo"
+						exit={{ scale: 0.9, opacity: 0 }}
+						transition={{ duration: 0.3, ease: "easeOut" }}
+					/>
+					<motion.div
+						layoutId="title"
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.3, ease: "easeOut" }}
+					>
+						<TypographyH1>Tilly</TypographyH1>
+					</motion.div>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	)
+}

src/app/main.tsx

@@ -11,7 +11,11 @@ import { IntlProvider } from "#shared/intl/setup"
 import { messagesDe } from "#shared/intl/messages"
 import { useSyncRemindersToServiceWorker } from "#app/hooks/use-sync-reminders-to-sw"
 import { PWAContext, usePWAProvider } from "#app/lib/pwa"
-import { SplashScreen } from "./components/splash-screen"
+import {
+	SplashScreen,
+	SplashScreenStatic,
+	useSplashDelay,
+} from "./components/splash-screen"
 import { Toaster } from "#shared/ui/sonner"
 import { MainErrorBoundary } from "#app/components/main-error-boundary"
 
@@ -39,7 +43,7 @@ function JazzWithClerk() {
 				clerk={clerk}
 				AccountSchema={UserAccount}
 				sync={syncConfig}
-				fallback={<SplashScreen />}
+				fallback={<SplashScreenStatic />}
 			>
 				<RouterWithJazz />
 				<Toaster richColors />
@@ -52,8 +56,8 @@ function RouterWithJazz() {
 	useSyncRemindersToServiceWorker()
 	let me = useAccount(UserAccount, { resolve: { root: true } })
 
-	// Only show splash screen if account is still loading
-	if (me.$jazz.loadingState === "loading") return <SplashScreen />
+	let splashReady = useSplashDelay(700)
+	let showSplash = me.$jazz.loadingState === "loading" || !splashReady
 
 	// Pass null for unauthenticated users, me object for authenticated users
 	let contextMe
@@ -65,17 +69,19 @@ function RouterWithJazz() {
 
 	let locale = contextMe?.root?.language || "en"
 
-	if (locale === "de") {
-		return (
-			<IntlProvider messages={messagesDe} locale="de">
-				<RouterProvider router={router} context={{ me: contextMe }} />
-			</IntlProvider>
-		)
-	}
 	return (
-		<IntlProvider>
-			<RouterProvider router={router} context={{ me: contextMe }} />
-		</IntlProvider>
+		<>
+			<SplashScreen show={showSplash} />
+			{locale === "de" ? (
+				<IntlProvider messages={messagesDe} locale="de">
+					<RouterProvider router={router} context={{ me: contextMe }} />
+				</IntlProvider>
+			) : (
+				<IntlProvider>
+					<RouterProvider router={router} context={{ me: contextMe }} />
+				</IntlProvider>
+			)}
+		</>
 	)
 }
 

src/global.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="astro/client" />
+
+interface Window {
+	__pageLoadTime?: number
+}

src/pages/app/index.astro

@@ -66,10 +66,15 @@ let metaDescription =
 	<body
 		class="selection:bg-primary selection:text-primary-foreground select-none bg-background text-foreground *:border-border overscroll-y-none"
 	>
+		<div id="splash" class="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background">
+			<img src="/app/icons/icon-192x192.png" class="size-24 rounded-lg" />
+			<span class="text-4xl font-bold tracking-tight">Tilly</span>
+		</div>
 		<PWA client:only="react">
 			<SplashScreen slot="fallback" />
 		</PWA>
 		<script>
+			window.__pageLoadTime = Date.now()
 			function updateThemeColor() {
 				let meta = document.getElementById("theme-color")
 				if (!meta) return