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)
This commit is contained in:
2025-10-02 16:05:53 +00:00
parent ada98ef3a4
commit d3bac14f71

View File

@@ -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}
>