perf(config): optimize caching strategy and font loading

- Update `next.config.ts` to use `stale-while-revalidate` for application HTML shells to improve WebView rendering speed.
- Implement immutable caching for static assets in `/assets/fonts/`.
- Add `.woff2` versions of various fonts to `public/assets/fonts/` and `public/fonts/` to improve performance and reduce payload size.
- Update `globals.css` to prioritize `.woff2` font formats.
- Increase `staleTime` from 30s to 3m for various marriage-related queries in `use-form-schema.ts` and client components to reduce redundant network requests.
- Refactor `QuestionSheet` to use CSS-based `min-h-[52px]` instead of dynamic inline style calculations for option buttons, improving layout stability and simplifying the component.
- Improve loading state handling in `QuestionDetailClient` by incorporating `isPending` from TanStack Query.
- Update test assertions in `question-sheet.test.tsx` to reflect the shift from inline styles to Tailwind CSS classes.

next.config.ts

@@ -82,16 +82,12 @@ const nextConfig: NextConfig = {
         ],
       },
       {
-        // Application HTML pages – no-store to prevent HTML/shell caching in WebView
+        // Application HTML shell – App Shell + Stale-While-Revalidate pattern for instant WebView rendering
         source: "/:path((?!api/|_next/|fonts/|assets/).*)",
         headers: [
           {
             key: "Cache-Control",
-            value: "no-store, no-cache, must-revalidate, max-age=0",
-          },
-          {
-            key: "Pragma",
-            value: "no-cache",
+            value: "public, max-age=0, stale-while-revalidate=86400",
           },
         ],
       },
@@ -115,6 +111,16 @@ const nextConfig: NextConfig = {
           },
         ],
       },
+      {
+        // Static fonts inside assets directory are immutable
+        source: "/assets/fonts/:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable",
+          },
+        ],
+      },
     ];
   },
 };

src/app/globals.css

@@ -3,7 +3,9 @@
 /* ─── App fonts matching Flutter Najm & Hosseinieh ─── */
 @font-face {
   font-family: 'Faminela';
-  src: url('/fonts/Faminela/Faminela.otf') format('opentype'),
+  src: url('/fonts/Faminela/Faminela.woff2') format('woff2'),
+       url('/assets/fonts/Faminela.woff2') format('woff2'),
+       url('/fonts/Faminela/Faminela.otf') format('opentype'),
        url('/assets/fonts/Faminela.otf') format('opentype'),
        url('/assets/fonts/faminela.ttf') format('truetype');
   font-weight: 400 900;
@@ -12,35 +14,40 @@
 }
 @font-face {
   font-family: 'YekanX';
-  src: url('/assets/fonts/YekanXFaNum-R.ttf') format('truetype');
+  src: url('/assets/fonts/YekanXFaNum-R.woff2') format('woff2'),
+       url('/assets/fonts/YekanXFaNum-R.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'YekanXArabic';
-  src: url('/assets/fonts/ArabicYekanXRegular.ttf') format('truetype');
+  src: url('/assets/fonts/ArabicYekanXRegular.woff2') format('woff2'),
+       url('/assets/fonts/ArabicYekanXRegular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'NastaliqUrdu';
-  src: url('/assets/fonts/NotoNastaliqUrdu.ttf') format('truetype');
+  src: url('/assets/fonts/NotoNastaliqUrdu.woff2') format('woff2'),
+       url('/assets/fonts/NotoNastaliqUrdu.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Segoeui';
-  src: url('/assets/fonts/segoeui.ttf') format('truetype');
+  src: url('/assets/fonts/segoeui.woff2') format('woff2'),
+       url('/assets/fonts/segoeui.ttf') format('truetype');
   font-weight: 400 500;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Segoeui';
-  src: url('/assets/fonts/SegoeUIBold.ttf') format('truetype');
+  src: url('/assets/fonts/SegoeUIBold.woff2') format('woff2'),
+       url('/assets/fonts/SegoeUIBold.ttf') format('truetype');
   font-weight: 600 900;
   font-style: normal;
   font-display: swap;

src/app/questions-list/[slug]/question-detail-client.tsx

@@ -349,13 +349,18 @@ export default function QuestionDetailClient({
     } catch {}
     return false;
   }, [isAssessment, overview, itemSlug, profileId]);
-  const { data: sectionResponse, isLoading: isSectionLoading, isError: isSectionError, refetch: refetchSection } =
-    useFormSectionQuery(
-      "profile",
-      itemSlug,
-      locale,
-      Boolean(itemSlug) && !isAssessment,
-    );
+  const {
+    data: sectionResponse,
+    isLoading: isSectionLoading,
+    isPending: isSectionPending,
+    isError: isSectionError,
+    refetch: refetchSection,
+  } = useFormSectionQuery(
+    "profile",
+    itemSlug,
+    locale,
+    Boolean(itemSlug) && !isAssessment,
+  );
   const items = useMemo(
     () => convertOverviewToFrontendItems(overview),
     [overview],
@@ -368,14 +373,17 @@ export default function QuestionDetailClient({
         sectionResponse.section_progress.completion_percent,
       );
     }
-    return overviewItem;
+    if (isAssessment) {
+      return overviewItem;
+    }
+    return null;
   }, [isAssessment, overviewItem, sectionResponse]);
   const isSchemaError = isAssessment
     ? isOverviewError
     : (isOverviewError || isSectionError) && !sectionResponse;
   const isSchemaLoading = isAssessment
     ? isOverviewLoading
-    : !sectionResponse && (isOverviewLoading || isSectionLoading);
+    : !sectionResponse && !isSchemaError && (isOverviewLoading || isSectionLoading || isSectionPending);
 
   const cattellQuery = useCattellQuestionsQuery(locale, {
     enabled: isCattellSlug && isTestStarted,
@@ -395,13 +403,13 @@ export default function QuestionDetailClient({
       void queryClient.prefetchQuery({
         queryKey: marriageQueryKeys.cattellQuestions(locale),
         queryFn: () => getCattellQuestions(locale),
-        staleTime: 30 * 1000,
+        staleTime: 3 * 60 * 1000,
       });
     } else if (isGlasserSlug) {
       void queryClient.prefetchQuery({
         queryKey: marriageQueryKeys.glasserQuestions(locale),
         queryFn: () => getGlasserQuestions(locale),
-        staleTime: 30 * 1000,
+        staleTime: 3 * 60 * 1000,
       });
     }
   }, [
@@ -534,7 +542,7 @@ export default function QuestionDetailClient({
             <div className="flex min-h-0 flex-1 items-center justify-center pb-[76px]">
               <span
                 role="status"
-                className="size-5 animate-spin rounded-full border-2 border-[#E03950]/25 border-t-[#E03950] motion-reduce:animate-none"
+                className="size-8 animate-spin rounded-full border-[2.5px] border-[#E03950]/25 border-t-[#E03950] motion-reduce:animate-none"
               />
             </div>
 

src/app/questions-list/questions-list-client.tsx

@@ -543,13 +543,13 @@ export default function QuestionsListClient({
           void queryClient.prefetchQuery({
             queryKey: marriageQueryKeys.cattellQuestions(locale),
             queryFn: () => getCattellQuestions(locale),
-            staleTime: 30 * 1000,
+            staleTime: 3 * 60 * 1000,
           });
         } else {
           void queryClient.prefetchQuery({
             queryKey: marriageQueryKeys.glasserQuestions(locale),
             queryFn: () => getGlasserQuestions(locale),
-            staleTime: 30 * 1000,
+            staleTime: 3 * 60 * 1000,
           });
         }
         return;
@@ -558,7 +558,7 @@ export default function QuestionsListClient({
       void queryClient.prefetchQuery({
         queryKey: marriageQueryKeys.formSection("profile", item.slug, locale),
         queryFn: () => getFormSection("profile", item.slug, locale),
-        staleTime: 30 * 1000,
+        staleTime: 3 * 60 * 1000,
       });
     },
     [locale, queryClient, router],
@@ -608,7 +608,7 @@ export default function QuestionsListClient({
       void queryClient.prefetchQuery({
         queryKey: marriageQueryKeys.formSection("profile", profileSections[0].slug, locale),
         queryFn: () => getFormSection("profile", profileSections[0].slug, locale),
-        staleTime: 30 * 1000,
+        staleTime: 3 * 60 * 1000,
       });
     }
 
@@ -626,7 +626,7 @@ export default function QuestionsListClient({
           queryClient.fetchQuery({
             queryKey: marriageQueryKeys.formSection("profile", item.slug, locale),
             queryFn: () => getFormSection("profile", item.slug, locale),
-            staleTime: 30 * 1000,
+            staleTime: 3 * 60 * 1000,
           }),
         () => cancelled,
       );
@@ -1007,6 +1007,7 @@ export default function QuestionsListClient({
       >
         {activeSectionItem ? (
           <QuestionDetailClient
+            key={activeSectionItem.slug}
             closeLabel={t["Close questions list"] ?? "Close"}
             continueLabel={t["Continue"] ?? "Continue"}
             description={activeSectionItem.summary}

src/components/Componentes/question-sheet.test.tsx

@@ -1169,18 +1169,18 @@ describe("QuestionSheet component", () => {
       const shortBtn = screen.getByRole("button", { name: "موافق" });
       const longBtn = screen.getByRole("button", { name: longText });
 
-      // Short button has baseline min-height: 52px
-      expect(shortBtn.style.minHeight).toBe("52px");
-
-      // Long button dynamically scales based on character count (>= 114px)
-      const expectedMinHeight = `${calculateOptionMinHeight(longText)}px`;
-      expect(longBtn.style.minHeight).toBe(expectedMinHeight);
-      expect(calculateOptionMinHeight(longText)).toBeGreaterThanOrEqual(114);
-
-      // Card container has h-auto and shrink-0 to prevent flex clamping
+      // Short button has baseline min-height: min-h-[52px]
+      expect(shortBtn).toHaveClass("min-h-[52px]");
+      expect(shortBtn).toHaveClass("h-auto");
+      expect(shortBtn).toHaveClass("shrink-0");
+      expect(shortBtn).toHaveClass("box-border");
+
+      // Long button uses natural content-driven sizing (h-auto, shrink-0, min-h-[52px]) without forced inflated inline minHeight
+      expect(longBtn).toHaveClass("min-h-[52px]");
       expect(longBtn).toHaveClass("h-auto");
       expect(longBtn).toHaveClass("shrink-0");
       expect(longBtn).toHaveClass("box-border");
+      expect(longBtn.style.minHeight).toBe("");
     });
   });
 });

src/components/Componentes/question-sheet.tsx

@@ -987,8 +987,6 @@ export function QuestionSheet({ question, disabled }: QuestionSheetProps) {
                       !isSelected &&
                       Boolean(maxSelect && localSelectedList.length >= maxSelect);
 
-                    const minHeightPx = calculateOptionMinHeight(option.label);
-
                     return (
                       <button
                         key={option.id}
@@ -1003,11 +1001,8 @@ export function QuestionSheet({ question, disabled }: QuestionSheetProps) {
                             handleSelectSingle(option.id);
                           }
                         }}
-                        style={{
-                          minHeight: `${minHeightPx}px`,
-                        }}
                         className={[
-                          "flex h-auto w-full shrink-0 items-start gap-3 rounded-[12px] border px-3.5 py-3 text-start transition-colors select-none box-border",
+                          "flex min-h-[52px] h-auto w-full shrink-0 items-start gap-3 rounded-[12px] border px-3.5 py-3 text-start transition-colors select-none box-border",
                           isOptionDisabled
                             ? "opacity-35 cursor-not-allowed bg-[#F9FAFB] border-[#F2F4F7] text-[#98A2B3]"
                             : isSelected

src/hooks/marriage/use-form-schema.ts

@@ -110,7 +110,7 @@ export function useFormOverviewQuery(formId: string, locale: string) {
   return useQuery({
     queryKey: marriageQueryKeys.formOverview(formId, locale),
     queryFn: () => getFormOverview(formId, locale),
-    staleTime: 30 * 1000,
+    staleTime: 3 * 60 * 1000,
     refetchOnMount: "always",
     refetchOnWindowFocus: false,
   });
@@ -137,8 +137,8 @@ export function useFormSectionQuery(
     queryKey: marriageQueryKeys.formSection(formId, slug, locale),
     queryFn: () => getFormSection(formId, slug, locale),
     enabled,
-    staleTime: 30 * 1000,
-    refetchOnMount: false,
+    staleTime: 3 * 60 * 1000,
+    refetchOnMount: true,
     refetchOnWindowFocus: false,
   });
 }
@@ -159,7 +159,7 @@ export function useFormSchemaQuery<TData = FormSchemaResponse>(
   options?: QueryOptions<FormSchemaResponse, TData>,
 ) {
   return useQuery({
-    staleTime: 30 * 1000,
+    staleTime: 3 * 60 * 1000,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     ...options,