Implement localStorage persistence for HAR file viewer mode selection

[Copilot]

The HAR file viewer now persists the user's view mode selection (Table vs Waterfall view) in localStorage, ensuring their preference is maintained across page reloads and browser sessions.

Problem

Previously, the HAR file viewer would always default to table view when the page loaded, regardless of the user's last selected view mode. This created a poor user experience as users had to manually switch to their preferred view every time they visited the page.

Solution

Added localStorage persistence to the view mode state management:

• Load preference on mount: The component now checks localStorage for a saved view mode preference when initializing
• Save on change: View mode changes are automatically saved to localStorage using the key har-viewer-view-mode
• SSR compatibility: Proper error handling ensures the feature works gracefully in server-side rendering environments where localStorage is not available
• Race condition fix: Added an initialization flag to prevent the default state from overwriting the loaded preference

Implementation Details

The implementation uses React's useEffect hooks to:

1. Load the saved view mode from localStorage on component mount
2. Save view mode changes to localStorage when the user switches views
3. Handle cases where localStorage is unavailable (SSR, private browsing, etc.)

// Load view mode from localStorage on component mount
useEffect(() => {
  try {
    const savedViewMode = localStorage.getItem("har-viewer-view-mode");
    if (savedViewMode === "table" || savedViewMode === "waterfall") {
      setViewMode(savedViewMode);
    }
  } catch (error) {
    console.warn("Failed to load view mode from localStorage:", error);
  }
  setIsInitialized(true);
}, []);

// Save view mode to localStorage when it changes (but not on initial load)
useEffect(() => {
  if (!isInitialized) return;
  
  try {
    localStorage.setItem("har-viewer-view-mode", viewMode);
  } catch (error) {
    console.warn("Failed to save view mode to localStorage:", error);
  }
}, [viewMode, isInitialized]);

Testing

• Added comprehensive test coverage for localStorage functionality
• Tests cover default behavior, preference loading, saving on changes, and error handling
• All existing tests continue to pass
• Manual testing confirmed persistence works across page reloads


User Experience Impact

Users can now:

• Set their preferred view mode (Table or Waterfall) once
• Have that preference automatically restored when they return to the HAR file viewer
• Switch between views without losing their preference across sessions

This enhancement significantly improves the user experience by respecting user preferences and reducing repetitive interactions.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cloudflare-workers-and-pages]

Deploying jam-dev-utilities with    Cloudflare Pages

Latest commit:	926f897
Status:	⚡️  Build in progress...

View logs