Page switch: show the loading box only after 300ms, not for the 1-2 frames lazy() always takes

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/app/MainApp.tsx

@@ -67,6 +67,21 @@ export function MainApp({ profile, grades, payment, onSignedOut }: Props) {
   );
 }
 
+/**
+ * صفحه‌ها از قبل گرفته شده‌اند، ولی `lazy` حتی برای ماژولِ آماده هم یک رندرِ تهی می‌گیرد؛ نشان دادنِ
+ * «یه لحظه صبر کن» در همان یک-دو فریم همان پرشِ ریزِ بینِ صفحه‌ها بود. لودر فقط اگر بارگیری
+ * واقعاً طول کشید (شبکه‌ی کند، پیش از تمام شدنِ preload) پس از ۳۰۰ms ظاهر می‌شود.
+ * با مرورگر دیده نشده؛ فقط از روی کد.
+ */
+function DelayedLoading() {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    const t = setTimeout(() => setShow(true), 300);
+    return () => clearTimeout(t);
+  }, []);
+  return show ? <LoadingState /> : null;
+}
+
 function Screens({ onSignedOut }: Pick<Props, 'onSignedOut'>) {
   const nav = useNav();
   const { route } = nav;
@@ -84,7 +99,7 @@ function Screens({ onSignedOut }: Pick<Props, 'onSignedOut'>) {
             exit={{ opacity: 0, x: 18 }}
             transition={{ duration: 0.18 }}
           >
-            <Suspense fallback={<LoadingState />}>
+            <Suspense fallback={<DelayedLoading />}>
               <RouteView route={route} onSignedOut={onSignedOut} />
             </Suspense>
           </motion.div>