feat: added debounced storage

Author: ehpankaj

src/app/components/requestDetailsWrapper.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React, { Suspense } from 'react';
+import React, { Suspense, memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import DetailedRequest from '@/components/detailedRequest';
 import { Data } from '@/lib/types/data';
-import { Protocol } from '@/lib/types/protocol';
 import { View } from '@/lib/types/view';
 import { IssuesListFallback, IssuesListErrorFallback } from '@/helpers/fallback-loaders';
 
@@ -13,7 +12,7 @@ interface RequestDetailsWrapperP {
   selectedInteractionData: Data;
 }
 
-const RequestDetailsWrapper = (props: RequestDetailsWrapperP) => {
+const RequestDetailsWrapper = memo((props: RequestDetailsWrapperP) => {
   const { selectedInteractionData, view } = props;
 
   return (
@@ -62,7 +61,7 @@ const RequestDetailsWrapper = (props: RequestDetailsWrapperP) => {
       </ErrorBoundary>
     </div>
   );
-};
+});
 
 export default RequestDetailsWrapper;
 

src/app/components/requestsTableWrapper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Suspense, useMemo } from 'react';
+import React, { Suspense, useMemo, memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import RequestsTable from '@/components/requestsTable';
 import { Data } from '@/lib/types/data';
@@ -17,7 +17,7 @@ interface RequestsTableWrapperP {
   filter: Filter;
 }
 
-const RequestsTableWrapper = ({
+const RequestsTableWrapper = memo(({
   data,
   handleRowClick,
   selectedInteraction,
@@ -43,7 +43,7 @@ const RequestsTableWrapper = ({
       </ErrorBoundary>
     </div>
   );
-};
+});
 
 export default RequestsTableWrapper;
 

src/app/page.tsx

@@ -31,7 +31,7 @@ import { StoredData } from '@/lib/types/storedData';
 import { Tab } from '@/lib/types/tab';
 import { View } from '@/lib/types/view';
 import { ThemeName, getTheme } from '@/theme';
-import { writeStoredData, getStoredData, defaultStoredData } from '@/lib/localStorage';
+import { writeStoredData, getStoredData, defaultStoredData, flushStoredData } from '@/lib/localStorage';
 import RequestDetailsWrapper from './components/requestDetailsWrapper';
 import RequestsTableWrapper from './components/requestsTableWrapper';
 import './styles.scss';
@@ -304,6 +304,40 @@ const HomePage = () => {
   }, [isClient]);
 
   const pollingIntervalRef = useRef<number | undefined>(undefined);
+  const isPageVisibleRef = useRef(true);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      isPageVisibleRef.current = !document.hidden;
+      
+      if (document.hidden) {
+        if (pollingIntervalRef.current) {
+          window.clearInterval(pollingIntervalRef.current);
+          pollingIntervalRef.current = undefined;
+        }
+        flushStoredData();
+      } else if (isClient && storedData.tabs.length > 0) {
+        if (!pollingIntervalRef.current) {
+          processPolledData(); // Immediate poll on return
+          pollingIntervalRef.current = window.setInterval(() => {
+            processPolledData();
+          }, 4000);
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    
+    const handleBeforeUnload = () => {
+      flushStoredData();
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [isClient, storedData.tabs.length, processPolledData]);
 
   useEffect(() => {
     if (!isClient || storedData.tabs.length === 0) return;
@@ -312,9 +346,11 @@ const HomePage = () => {
       window.clearInterval(pollingIntervalRef.current);
     }
 
-    pollingIntervalRef.current = window.setInterval(() => {
-      processPolledData();
-    }, 4000);
+    if (isPageVisibleRef.current) {
+      pollingIntervalRef.current = window.setInterval(() => {
+        processPolledData();
+      }, 4000);
+    }
 
     const tempFilteredData = storedData.data
       .filter((item) => item['unique-id'] === storedData.selectedTab['unique-id']);
@@ -333,13 +369,15 @@ const HomePage = () => {
     item === storedData.selectedTab
   );
 
+  const theme = useMemo(() => getTheme(storedData.theme), [storedData.theme]);
+
   if (!isClient) {
     return null;
   }
 
   return (
-    <ThemeProvider theme={getTheme(storedData.theme)}>
-      <GlobalStyles theme={getTheme(storedData.theme)} />
+    <ThemeProvider theme={theme}>
+      <GlobalStyles theme={theme} />
       <div className="main">
         <AppLoader isRegistered={isRegistered} mode={loaderAnimationMode} />
         {aboutPopupVisibility && (

src/components/detailedRequest/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, memo, useCallback } from 'react';
 import Prism from 'prismjs';
 import 'prismjs/themes/prism-dark.css';
 import 'prismjs/components/prism-http';
@@ -17,13 +17,31 @@ interface DetailedRequestP {
   protocol: Protocol;
 }
 
-const DetailedRequest = ({ title, data, view, protocol }: DetailedRequestP) => {
+const DetailedRequest = memo(({ title, data, view, protocol }: DetailedRequestP) => {
   const codeRef = useRef<HTMLElement>(null);
+  const highlightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (codeRef.current) {
-      Prism.highlightElement(codeRef.current);
+    // Debounce Prism highlighting to prevent blocking during rapid selection
+    if (highlightTimeoutRef.current) {
+      clearTimeout(highlightTimeoutRef.current);
     }
+    
+    highlightTimeoutRef.current = setTimeout(() => {
+      if (codeRef.current) {
+        Prism.highlightElement(codeRef.current);
+      }
+    }, 100);
+
+    return () => {
+      if (highlightTimeoutRef.current) {
+        clearTimeout(highlightTimeoutRef.current);
+      }
+    };
+  }, [data]);
+
+  const handleCopy = useCallback(() => {
+    copyDataToClipboard(data);
   }, [data]);
 
   return (
@@ -36,7 +54,7 @@ const DetailedRequest = ({ title, data, view, protocol }: DetailedRequestP) => {
     >
       <span>{title}</span>
       <div className="body">
-        <button type="button" className="copy_button" onClick={() => copyDataToClipboard(data)}>
+        <button type="button" className="copy_button" onClick={handleCopy}>
           Copy <CopyIcon />
         </button>
         <div className="pre_wrapper">
@@ -52,6 +70,6 @@ const DetailedRequest = ({ title, data, view, protocol }: DetailedRequestP) => {
       </div>
     </div>
   );
-};
+});
 
 export default DetailedRequest;

src/components/requestsTable/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import React, { useEffect, useState, useCallback, useMemo, useRef, memo } from 'react';
 import { formatDistance } from 'date-fns';
 import { FilterIcon, FilterSelectedIcon } from '@/components/icons';
 import { getStoredData, writeStoredData } from '@/lib/localStorage';
@@ -17,7 +17,7 @@ interface RequestsTableP {
   filter: Filter;
 }
 
-const RequestsTable = ({ data, handleRowClick, selectedInteraction, filter }: RequestsTableP) => {
+const RequestsTable = memo(({ data, handleRowClick, selectedInteraction, filter }: RequestsTableP) => {
   const [filterDropdownVisibility, setFilterDropdownVisibility] = useState<boolean>(false);
   const [filterValue, setFilterValue] = useState<Filter>(filter);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -125,9 +125,9 @@ const RequestsTable = ({ data, handleRowClick, selectedInteraction, filter }: Re
       </tbody>
     </table>
   );
-};
+});
 
-const TableRow = React.memo(({ 
+const TableRow = memo(({ 
   item, 
   index, 
   total, 

src/lib/localStorage/index.ts

@@ -4,13 +4,48 @@ const STORAGE_KEY = 'app';
 
 export { defaultStoredData };
 
+// Debounce timer for localStorage writes
+let writeDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+let pendingData: StoredData | null = null;
+
+// Debounced write to prevent blocking main thread on rapid updates
 export const writeStoredData = (data: StoredData): void => {
-  if (typeof window !== 'undefined') {
+  if (typeof window === 'undefined') return;
+
+  pendingData = data;
+
+  // Clear existing timer
+  if (writeDebounceTimer) {
+    clearTimeout(writeDebounceTimer);
+  }
+
+  // Debounce writes by 300ms to batch rapid updates
+  writeDebounceTimer = setTimeout(() => {
+    if (pendingData) {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(pendingData));
+      } catch (error) {
+        console.error('Failed to write to localStorage:', error);
+      }
+      pendingData = null;
+    }
+    writeDebounceTimer = null;
+  }, 300);
+};
+
+// Force immediate write (for critical updates like before page unload)
+export const flushStoredData = (): void => {
+  if (writeDebounceTimer) {
+    clearTimeout(writeDebounceTimer);
+    writeDebounceTimer = null;
+  }
+  if (pendingData && typeof window !== 'undefined') {
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(pendingData));
     } catch (error) {
       console.error('Failed to write to localStorage:', error);
     }
+    pendingData = null;
   }
 };
 
@@ -23,7 +58,6 @@ export const getStoredData = (): StoredData => {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
       const parsed = JSON.parse(stored);
-      // Merge with defaults to handle any missing fields
       return { ...defaultStoredData, ...parsed };
     }
   } catch (error) {