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/AdminLogin.tsx    |  2 +-
 client/src/components/BlurryLoadDiv.tsx | 21 +++++++++++++++++++++
 client/src/components/BlurryLoadImg.tsx | 15 +++++++++++++++
 client/src/components/Home.tsx          | 28 +++++++++++++++++-----------
 client/src/components/Schedule.tsx      | 11 +++++++----
 5 files changed, 61 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/BlurryLoadDiv.tsx
 create mode 100644 client/src/components/BlurryLoadImg.tsx

(limited to 'client/src/components')

diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index f1f676f..4d722e8 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -107,7 +107,7 @@ function GuestLogin() {
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton onClick={handleClickShowPassword}>
-                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                  {showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
             ),
diff --git a/client/src/components/BlurryLoadDiv.tsx b/client/src/components/BlurryLoadDiv.tsx
new file mode 100644
index 0000000..1dfe07e
--- /dev/null
+++ b/client/src/components/BlurryLoadDiv.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ClassAttributes, ImgHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { useBlurryLoad } from '../useBlurryLoad.ts';
+import { useMediaQuery } from '@mui/material';
+
+export const BlurryLoadDiv = (
+  props: JSX.IntrinsicAttributes &
+    ClassAttributes<HTMLImageElement> &
+    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
+) => {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  let blurry = '';
+  if (!isMobile) {
+    useBlurryLoad();
+    blurry = 'blurry-load';
+  }
+  return (
+    <div alt="" {...props} className={`${blurry} ${props.className}`}></div>
+  );
+};
diff --git a/client/src/components/BlurryLoadImg.tsx b/client/src/components/BlurryLoadImg.tsx
new file mode 100644
index 0000000..c28aa45
--- /dev/null
+++ b/client/src/components/BlurryLoadImg.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClassAttributes, ImgHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { useBlurryLoad } from '../useBlurryLoad.ts';
+
+export const BlurryLoadImg = (
+  props: JSX.IntrinsicAttributes &
+    ClassAttributes<HTMLImageElement> &
+    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
+) => {
+  useBlurryLoad();
+  return (
+    <img alt="" {...props} className={`blurry-load ${props.className}`}></img>
+  );
+};
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index f735195..79743a5 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -1,30 +1,33 @@
 import React from 'react';
 import { useEffect, useState } from 'react';
 import './Carousel.css';
-import p0 from '/EngagmentSession_06.23.2024-131.jpg';
-import p1 from '/EngagmentSession_06.23.2024-161.jpg';
-import p2 from '/EngagmentSession_06.23.2024-164.jpg';
-import p3 from '/EngagmentSession_06.23.2024-259.jpg';
-import p4 from '/EngagmentSession_06.23.2024-267.jpg';
-import p5 from '/EngagmentSession_06.23.2024-284.jpg';
+import { BlurryLoadImg } from './BlurryLoadImg';
+
+const images = [
+  { small: '/small/engagement1.webp', full: '/full/engagement1.jpg' },
+  { small: '/small/engagement2.webp', full: '/full/engagement2.jpg' },
+  { small: '/small/engagement3.webp', full: '/full/engagement3.jpg' },
+  { small: '/small/engagement4.webp', full: '/full/engagement4.jpg' },
+  { small: '/small/engagement5.webp', full: '/full/engagement5.jpg' },
+  { small: '/small/engagement6.webp', full: '/full/engagement6.jpg' },
+];
 
 function Home() {
   const [currentIndex, setIndex] = useState<number>(0);
-  const photos = [p0, p1, p2, p3, p4, p5];
 
   useEffect(() => {
     const interval = setInterval(() => {
       setIndex((prevIndex) =>
-        prevIndex === photos.length - 1 ? 0 : prevIndex + 1
+        prevIndex === images.length - 1 ? 0 : prevIndex + 1
       );
     }, 3000);
     return () => clearInterval(interval);
-  }, [photos.length]);
+  }, [images.length]);
 
   return (
     <div className="carousel-container">
       <div className="carousel">
-        {photos.map((photo, index) => (
+        {images.map((image, index) => (
           <div
             key={index}
             className={
@@ -33,7 +36,10 @@ function Home() {
                 : 'carousel-slide'
             }
           >
-            <img src={photo}></img>
+            <BlurryLoadImg
+              src={image.small}
+              data-large={`${image.full}`}
+            ></BlurryLoadImg>
           </div>
         ))}
       </div>
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