From d3bac14f711270ef584550e42e0cb7d9b7518036 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Thu, 2 Oct 2025 16:05:53 +0000
Subject: [PATCH] fix(frontend): Fix MUI hydration mismatch in ReduxProvider

Issue: MUI v7 CircularProgress was causing hydration mismatch warnings
due to different CSS class names between server and client renders.

Solution: Only render the MUI loading component on the client side
using isClient state flag. This prevents SSR hydration issues while
maintaining the same functionality.

Changes:
- Added useState to track client-side rendering
- Conditionally render CircularProgress only on client
- Server now renders null for loading state (no hydration mismatch)
---
 .../components/providers/ReduxProvider.tsx    | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/maternal-web/components/providers/ReduxProvider.tsx b/maternal-web/components/providers/ReduxProvider.tsx
index 01d9e77..9c089db 100644
--- a/maternal-web/components/providers/ReduxProvider.tsx
+++ b/maternal-web/components/providers/ReduxProvider.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store, persistor } from '@/store/store';
@@ -9,8 +9,11 @@ import { CircularProgress, Box } from '@mui/material';
 
 export function ReduxProvider({ children }: { children: React.ReactNode }) {
   const cleanupRef = useRef<(() => void) | null>(null);
+  const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
+    setIsClient(true);
+
     // Setup network detection
     cleanupRef.current = setupNetworkDetection(store.dispatch);
 
@@ -26,16 +29,18 @@ export function ReduxProvider({ children }: { children: React.ReactNode }) {
     <Provider store={store}>
       <PersistGate
         loading={
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              minHeight: '100vh'
-            }}
-          >
-            <CircularProgress />
-          </Box>
+          isClient ? (
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: '100vh'
+              }}
+            >
+              <CircularProgress />
+            </Box>
+          ) : null
         }
         persistor={persistor}
       >