Merge pull request #3706 from verifywise-ai/mo-332-apr-10-clients-debts

Frontend Performance Audit

Author: MuhammadKhalilzadeh

.claude/settings.local.json

@@ -13,7 +13,15 @@
       "Bash(grep -r \"superadmin\\\\|super.admin\\\\|SuperAdmin\" /Users/harsh/Data/vw/verifywise/Servers/src --include=*.ts -i)",
       "Bash(grep:*)",
       "Bash(git log:*)",
-      "Bash(echo \"EXIT=$?\")"
+      "Bash(echo \"EXIT=$?\")",
+      "Bash(gh issue view:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(find:*)",
+      "Bash(wc:*)",
+      "Bash(npx vite build:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)"
     ]
   }
 }

Clients/package.json

@@ -16,7 +16,8 @@
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
     "test:e2e:headed": "playwright test --headed",
-    "test:e2e:debug": "playwright test --debug"
+    "test:e2e:debug": "playwright test --debug",
+    "analyze": "npx vite-bundle-visualizer"
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.148",

…/src/presentation/assets/icons/build.svg Clients/public/assets/icons/build.svgClients/src/presentation/assets/icons/build.svg renamed to Clients/public/assets/icons/build.svg Clients/src/presentation/assets/icons/build.svg renamed to Clients/public/assets/icons/build.svg

@@ -14,7 +14,7 @@ import {
   SearchResult,
   getEntityDisplayName,
 } from "../repository/search.repository";
-import PolicyTemplates from "../data/PolicyTemplates.json";
+// PolicyTemplates.json loaded dynamically from /data/PolicyTemplates.json
 
 /**
  * Recent search entry
@@ -64,12 +64,23 @@ const DEBOUNCE_MS = 300;
 const MIN_QUERY_LENGTH = 3;
 
 /**
- * Search policy templates locally (from JSON file)
+ * Search policy templates by fetching from public data
  */
-function searchPolicyTemplates(query: string): SearchResult[] {
+let _policyTemplatesCache: { id: number; title: string; description: string }[] | null = null;
+
+async function searchPolicyTemplates(query: string): Promise<SearchResult[]> {
+  if (!_policyTemplatesCache) {
+    try {
+      const res = await fetch("/data/PolicyTemplates.json");
+      _policyTemplatesCache = await res.json();
+    } catch {
+      return [];
+    }
+  }
+
   const lowerQuery = query.toLowerCase();
 
-  return (PolicyTemplates as { id: number; title: string; description: string }[])
+  return (_policyTemplatesCache ?? [])
     .filter(
       (template) =>
         template.title.toLowerCase().includes(lowerQuery) ||
@@ -183,7 +194,7 @@ export function useWiseSearch(): UseWiseSearchReturn {
       // When reviewStatus filter is active, skip local policy templates (they don't have review status)
       const [apiResponse, policyTemplateResults] = await Promise.all([
         performWiseSearch(searchParams),
-        statusFilter ? Promise.resolve([]) : Promise.resolve(searchPolicyTemplates(searchQuery)),
+        statusFilter ? Promise.resolve([]) : searchPolicyTemplates(searchQuery),
       ]);
 
       // Check if this request was aborted

…tation/assets/icons/huggingface_logo.svg …public/assets/icons/huggingface_logo.svgClients/src/presentation/assets/icons/huggingface_logo.svg renamed to Clients/public/assets/icons/huggingface_logo.svg Clients/src/presentation/assets/icons/huggingface_logo.svg renamed to Clients/public/assets/icons/huggingface_logo.svg

@@ -0,0 +1,42 @@
+import { lazy, ComponentType } from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+
+export const LazyFallback = () => (
+  <Box
+    sx={{
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+    }}
+  >
+    <CircularProgress size={32} />
+  </Box>
+);
+
+/**
+ * Wraps React.lazy() with retry logic for chunk load failures.
+ * Retries up to 3 times with exponential backoff (1.5s, 3s, 6s).
+ */
+export function lazyRoute<T extends ComponentType<unknown>>(
+  factory: () => Promise<{ default: T }>
+) {
+  return lazy(() => retryImport(factory));
+}
+
+function retryImport<T extends ComponentType<unknown>>(
+  factory: () => Promise<{ default: T }>,
+  retries = 3,
+  delay = 1500
+): Promise<{ default: T }> {
+  return factory().catch((err) => {
+    if (retries <= 0) throw err;
+    return new Promise<{ default: T }>((resolve) =>
+      setTimeout(
+        () => resolve(retryImport(factory, retries - 1, delay * 2)),
+        delay
+      )
+    );
+  });
+}

…src/presentation/assets/MITAIRISKDB.json Clients/public/data/MITAIRISKDB.jsonClients/src/presentation/assets/MITAIRISKDB.json renamed to Clients/public/data/MITAIRISKDB.json Clients/src/presentation/assets/MITAIRISKDB.json renamed to Clients/public/data/MITAIRISKDB.json

@@ -1,4 +1,4 @@
-import riskData from "../../assets/MITAIRISKDB.json";
+import { useState, useEffect } from "react";
 import RiskDatabaseModal from "../RiskDatabaseModal";
 import { RiskData, SelectedRiskData } from "../RiskDatabaseModal/types";
 import { Likelihood, Severity } from "../RiskLevel/constants";
@@ -60,12 +60,26 @@ const AddNewRiskMITModal = ({
   setIsOpen,
   onRiskSelected,
 }: AddNewRiskMITModalProps) => {
+  const [riskData, setRiskData] = useState<RiskData[]>([]);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen || loaded) return;
+    fetch("/data/MITAIRISKDB.json")
+      .then((res) => res.json())
+      .then((data) => {
+        setRiskData(data);
+        setLoaded(true);
+      })
+      .catch(() => {});
+  }, [isOpen, loaded]);
+
   return (
     <RiskDatabaseModal
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       onRiskSelected={onRiskSelected}
-      riskData={riskData as RiskData[]}
+      riskData={riskData}
       mapSeverity={mapSeverityMIT}
       mapLikelihood={mapLikelihoodMIT}
       title="Add a new risk from risk database"