From fab698d676d43a46b0fd5df592915ca12111dbcb Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 1 Nov 2024 14:10:11 -0700
Subject: Blurry load

---
 client/src/components/Schedule.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'client/src/components/Schedule.tsx')

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>
   );
 }
 
-- 
cgit v1.2.3