perf: optimize loading transitions and build configuration

- Reduce transition durations and improve animation performance
- Replace setTimeout with requestAnimationFrame for smoother transitions
- Optimize Vite build configuration with minification and CSS splitting
- Remove console logs in production via terser options

Author: wilsonwangdev

astro.config.mjs

@@ -19,7 +19,24 @@ export default defineConfig({
   },
 
   prefetch: {
-    prefetchAll: true
+    prefetchAll: true,
+    defaultStrategy: 'viewport'
+  },
+
+  vite: {
+    build: {
+      cssCodeSplit: true,
+      cssMinify: true,
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: true
+        }
+      }
+    },
+    optimizeDeps: {
+      include: ['tailwindcss']
+    }
   },
 
   // Configure Vercel adapter with image service enabled

src/components/Home.astro

@@ -11,7 +11,7 @@ const categories = ['All', ...new Set(tools.map((tool) => tool.category))];
 ---
 
 <div id="app" class="container mx-auto px-4 py-8 font-inter dark:text-gray-100">
-    <div id="loadingState" class="block transition-opacity duration-700 ease-in-out">
+    <div id="loadingState" class="block transition-opacity duration-300 ease-in-out">
         <LoadingState />
     </div>
 
@@ -29,7 +29,7 @@ const categories = ['All', ...new Set(tools.map((tool) => tool.category))];
         </style>
     </noscript>
 
-    <div id="mainContent" class="hidden opacity-0 transition-all duration-700 ease-in-out transform translate-y-8 scale-[0.98]">
+    <div id="mainContent" class="hidden opacity-0 transition-all duration-300 ease-in-out transform translate-y-4 scale-[0.99]">
     <style>
         /* Ensure the content is fully rendered in memory but not visible */
         #mainContent {
@@ -39,6 +39,7 @@ const categories = ['All', ...new Set(tools.map((tool) => tool.category))];
             right: 0;
             visibility: hidden;
             z-index: -1; /* Ensure it's behind the loading state */
+            will-change: opacity, transform; /* Optimize for animation */
         }
 
         /* When content is ready to be shown */
@@ -181,7 +182,7 @@ const categories = ['All', ...new Set(tools.map((tool) => tool.category))];
         }
 
         // Set a timeout to ensure content is shown even if loading takes too long
-        const maxLoadingTime = 3000; // 3 seconds max loading time
+        const maxLoadingTime = 1500; // Reduced from 3000ms to 1500ms
         const forceShowTimeout = setTimeout(() => {
             console.log('Force showing content due to timeout');
             if (loadingState) {
@@ -194,6 +195,8 @@ const categories = ['All', ...new Set(tools.map((tool) => tool.category))];
                 mainContent.classList.remove('hidden');
                 mainContent.classList.add('opacity-100');
                 mainContent.classList.remove('opacity-0');
+                // Ensure transform is applied immediately
+                mainContent.style.transform = 'translateY(0) scale(1)';
             }
         }, maxLoadingTime);
 
@@ -240,38 +243,38 @@ const categories = ['All', ...new Set(tools.map((tool) => tool.category))];
             }
         });
 
-        const MIN_LOADING_TIME = 800;
+        const MIN_LOADING_TIME = 300; // Reduced from 800ms to 300ms
         const startTime = Date.now();
 
         const performTransition = () => {
             // Clear the force show timeout since we're transitioning normally
             clearTimeout(forceShowTimeout);
 
             if (loadingState && mainContent) {
-                // First make the main content ready but still invisible
+                // Prepare content for immediate display
                 mainContent.classList.add('content-visible');
                 mainContent.style.display = 'block';
                 mainContent.classList.remove('hidden');
 
-                // Small delay to ensure the DOM updates before animation
-                setTimeout(() => {
-                    // Start fading out loading state
+                // Use requestAnimationFrame for smoother transition
+                requestAnimationFrame(() => {
+                    // Start fading out loading state immediately
                     loadingState.classList.add('opacity-0');
 
-                    // Start fading in content with a slight delay for a smoother handoff
-                    setTimeout(() => {
+                    // Start fading in content with minimal delay
+                    requestAnimationFrame(() => {
                         mainContent.classList.add('opacity-100');
                         mainContent.classList.remove('opacity-0');
                         // Apply transform changes for a smooth animation
                         mainContent.style.transform = 'translateY(0) scale(1)';
-                    }, 150);
+                    });
 
                     // After transition completes, hide loading state completely
                     setTimeout(() => {
                         loadingState.style.display = 'none';
                         console.log('Transition complete - content visible');
-                    }, 700);
-                }, 100);
+                    }, 300); // Reduced from 700ms to 300ms
+                });
             }
         };
 

src/layouts/Layout.astro

@@ -26,7 +26,7 @@ const {
 		<title>{title}</title>
 		<ClientRouter fallback="swap" />
 		<style is:global>
-			/* Add loading indicator for view transitions */
+			/* Add loading indicator for view transitions - optimized for performance */
 			.astro-loading-indicator {
 				position: fixed;
 				top: 0;
@@ -38,7 +38,8 @@ const {
 				transform-origin: 0% 0%;
 				z-index: 9999;
 				opacity: 0;
-				transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
+				transition: transform 0.2s ease-out, opacity 0.15s ease-out;
+				will-change: transform, opacity;
 			}
 
 			:root.astro-loading .astro-loading-indicator {
@@ -53,9 +54,9 @@ const {
 
 			/* Light theme colors */
 			:root {
-				/* Theme transition settings - optimized for performance */
-				--theme-transition-duration: 250ms;
-				--theme-transition-timing: cubic-bezier(0.22, 0.61, 0.36, 1);
+				/* Theme transition settings - optimized for faster performance */
+				--theme-transition-duration: 150ms;
+				--theme-transition-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
 
 				/* Light theme colors */
 				--color-text: #1f2937;
@@ -172,20 +173,24 @@ const {
 			<slot />
 		</main>
 		<script>
-			// Handle loading indicator
+			// Handle loading indicator with optimized timing
 			document.addEventListener('astro:before-preparation', () => {
-				document.documentElement.classList.add('astro-loading');
+				requestAnimationFrame(() => {
+					document.documentElement.classList.add('astro-loading');
+				});
 			});
 
 			document.addEventListener('astro:after-preparation', () => {
-				document.documentElement.classList.add('astro-loading-done');
+				requestAnimationFrame(() => {
+					document.documentElement.classList.add('astro-loading-done');
+				});
 			});
 
 			document.addEventListener('astro:page-load', () => {
-				// Reset loading state
-				setTimeout(() => {
+				// Reset loading state immediately
+				requestAnimationFrame(() => {
 					document.documentElement.classList.remove('astro-loading', 'astro-loading-done');
-				}, 300);
+				});
 
 				// Announce page changes to screen readers
 				const pageTitle = document.title;
@@ -198,21 +203,17 @@ const {
 					document.body.appendChild(announcer);
 				}
 				announcer.textContent = `Navigated to ${pageTitle}`;
-				
+
 				// Ensure content is visible
 				const loadingState = document.getElementById('loadingState');
 				const mainContent = document.getElementById('mainContent');
-				
 				if (loadingState && mainContent) {
-					// Force content to be visible after page load
-					setTimeout(() => {
-						loadingState.style.display = 'none';
-						mainContent.style.display = 'block';
-						mainContent.classList.remove('hidden');
-						mainContent.classList.add('opacity-100');
-						mainContent.classList.add('translate-y-0');
-						mainContent.classList.remove('translate-y-4');
-					}, 500);
+					loadingState.style.display = 'none';
+					mainContent.style.display = 'block';
+					mainContent.classList.remove('hidden');
+					mainContent.classList.add('content-visible');
+					mainContent.classList.add('opacity-100');
+					mainContent.style.transform = 'translateY(0) scale(1)';
 				}
 			});
 		</script>

src/pages/index.astro

@@ -9,21 +9,26 @@ import Layout from '../layouts/Layout.astro';
 </Layout>
 
 <script>
-	// Ensure content is visible after a short delay
-	document.addEventListener('DOMContentLoaded', () => {
-		setTimeout(() => {
-			const loadingState = document.getElementById('loadingState');
-			const mainContent = document.getElementById('mainContent');
-			
-			if (loadingState && mainContent) {
-				console.log('Forcing content visibility from index.astro');
-				loadingState.style.display = 'none';
-				mainContent.style.display = 'block';
-				mainContent.classList.remove('hidden');
-				mainContent.classList.add('opacity-100');
-				mainContent.classList.add('translate-y-0');
-				mainContent.classList.remove('translate-y-4');
-			}
-		}, 1000);
-	});
+	// Ensure content is visible immediately after DOM is ready
+	const showContent = () => {
+		const loadingState = document.getElementById('loadingState');
+		const mainContent = document.getElementById('mainContent');
+		
+		if (loadingState && mainContent) {
+			console.log('Forcing content visibility from index.astro');
+			loadingState.style.display = 'none';
+			mainContent.style.display = 'block';
+			mainContent.classList.remove('hidden');
+			mainContent.classList.add('content-visible');
+			mainContent.classList.add('opacity-100');
+			mainContent.style.transform = 'translateY(0) scale(1)';
+		}
+	};
+
+	// Execute immediately if DOM is already loaded
+	if (document.readyState === 'interactive' || document.readyState === 'complete') {
+		showContent();
+	} else {
+		document.addEventListener('DOMContentLoaded', showContent);
+	}
 </script>