Blurry load

1 files changed, 7 insertions, 4 deletions

diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index 64140e4..dfe4a30 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -6,10 +6,10 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import divineShepherd from '/divine-shepherd.jpg';
 import InsertInvitationIcon from '@mui/icons-material/InsertInvitation';
 import { useAppDispatch } from '../hooks';
 import { showDialog } from '../slices/uiSlice';
+import { BlurryLoadDiv } from './BlurryLoadDiv';
 
 function Schedule() {
   const dispatch = useAppDispatch();
@@ -21,15 +21,18 @@ function Schedule() {
   };
 
   return (
-    <div
+    <BlurryLoadDiv
       style={{
         height: '100%',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`,
+        backgroundImage: `url(${
+          isMobile ? 'none' : '/small/divine-shepherd.webp'
+        })`,
         backgroundSize: 'cover',
       }}
+      data-large="/full/divine-shepherd.jpg"
     >
       <Paper
         elevation={3}
@@ -101,7 +104,7 @@ function Schedule() {
           </div>
         </div>
       </Paper>
-    </div>
+    </BlurryLoadDiv>
   );
 }