From c2f68b9c2d3e5d92497d393367563dfda404e16f Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Thu, 4 Jun 2026 11:03:56 +0800
Subject: [PATCH] fix: wrap Outlet in SuspenseBoundary to prevent full-page
 flash on route change

---
 input.css                         | 19 +++++++++++++++++++
 src/components/frontend_layout.rs | 13 ++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/input.css b/input.css
index 3a97044..0849fd9 100644
--- a/input.css
+++ b/input.css
@@ -556,6 +556,21 @@
   }
 }
 
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.page-enter {
+  animation: pageEnter 0.15s ease-out;
+}
+
 /* Reduced Motion */
 @media (prefers-reduced-motion: reduce) {
   html {
@@ -565,4 +580,8 @@
   details::details-content {
     transition: none;
   }
+
+  .page-enter {
+    animation: none;
+  }
 }
diff --git a/src/components/frontend_layout.rs b/src/components/frontend_layout.rs
index 4035c63..25592cd 100644
--- a/src/components/frontend_layout.rs
+++ b/src/components/frontend_layout.rs
@@ -3,19 +3,26 @@ use dioxus::prelude::*;
 use crate::components::footer::Footer;
 use crate::components::header::Header;
 use crate::components::nav::use_nav_items;
+use crate::components::skeletons::home_skeleton::HomeSkeleton;
+use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
 use crate::router::Route;
 use crate::theme::ThemeToggle;
 
 #[component]
 pub fn FrontendLayout() -> Element {
     let route = use_route::<Route>();
-    let nav_items = use_nav_items(route);
+    let nav_items = use_nav_items(route.clone());
 
     rsx! {
-        div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
+        div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]",
             Header { nav_items, right_content: rsx! { ThemeToggle {} } }
             main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
-                Outlet::<Route> {}
+                SuspenseBoundary {
+                    fallback: |_| rsx! {
+                        DelayedSkeleton { HomeSkeleton {} }
+                    },
+                    Outlet::<Route> {}
+                }
             }
             Footer {}
         }