Blurry load

21 files changed, 107 insertions, 16 deletions

diff --git a/client/public/divine-shepherd.jpg b/client/public/full/divine-shepherd.jpg
index c89749e..c89749e 100644
--- a/client/public/divine-shepherd.jpg
+++ b/client/public/full/divine-shepherd.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-131.jpg b/client/public/full/engagement1.jpg
index 0657a40..0657a40 100644
--- a/client/public/EngagmentSession_06.23.2024-131.jpg
+++ b/client/public/full/engagement1.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-161.jpg b/client/public/full/engagement2.jpg
index 92b5be5..92b5be5 100644
--- a/client/public/EngagmentSession_06.23.2024-161.jpg
+++ b/client/public/full/engagement2.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-164.jpg b/client/public/full/engagement3.jpg
index 529a324..529a324 100644
--- a/client/public/EngagmentSession_06.23.2024-164.jpg
+++ b/client/public/full/engagement3.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-259.jpg b/client/public/full/engagement4.jpg
index 075480c..075480c 100644
--- a/client/public/EngagmentSession_06.23.2024-259.jpg
+++ b/client/public/full/engagement4.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-267.jpg b/client/public/full/engagement5.jpg
index 7222c16..7222c16 100644
--- a/client/public/EngagmentSession_06.23.2024-267.jpg
+++ b/client/public/full/engagement5.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-284.jpg b/client/public/full/engagement6.jpg
index 2f06a42..2f06a42 100644
--- a/client/public/EngagmentSession_06.23.2024-284.jpg
+++ b/client/public/full/engagement6.jpg
diff --git a/client/public/small/divine-shepherd.webp b/client/public/small/divine-shepherd.webp
new file mode 100644
index 0000000..14a82df
--- /dev/null
+++ b/client/public/small/divine-shepherd.webp
diff --git a/client/public/small/engagement1.webp b/client/public/small/engagement1.webp
new file mode 100644
index 0000000..b8ce0f1
--- /dev/null
+++ b/client/public/small/engagement1.webp
diff --git a/client/public/small/engagement2.webp b/client/public/small/engagement2.webp
new file mode 100644
index 0000000..2c8b01a
--- /dev/null
+++ b/client/public/small/engagement2.webp
diff --git a/client/public/small/engagement3.webp b/client/public/small/engagement3.webp
new file mode 100644
index 0000000..84e8adc
--- /dev/null
+++ b/client/public/small/engagement3.webp
diff --git a/client/public/small/engagement4.webp b/client/public/small/engagement4.webp
new file mode 100644
index 0000000..6098083
--- /dev/null
+++ b/client/public/small/engagement4.webp
diff --git a/client/public/small/engagement5.webp b/client/public/small/engagement5.webp
new file mode 100644
index 0000000..b9faf7e
--- /dev/null
+++ b/client/public/small/engagement5.webp
diff --git a/client/public/small/engagement6.webp b/client/public/small/engagement6.webp
new file mode 100644
index 0000000..3e85e1f
--- /dev/null
+++ b/client/public/small/engagement6.webp
diff --git a/client/src/blurry-load.css b/client/src/blurry-load.css
new file mode 100644
index 0000000..df1dd09
--- /dev/null
+++ b/client/src/blurry-load.css
@@ -0,0 +1,8 @@
+.blurry-load {
+    filter: blur(6px);
+    transition: all .6s ease-in;
+}
+
+.blur-out {
+    filter: none!important
+}
\ No newline at end of file
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>
   );
 }
 
diff --git a/client/src/useBlurryLoad.ts b/client/src/useBlurryLoad.ts
new file mode 100644
index 0000000..59069d2
--- /dev/null
+++ b/client/src/useBlurryLoad.ts
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import './blurry-load.css';
+
+export interface UseBlurryLoadProps {
+  toBlurImages?: Element[];
+}
+
+export const useBlurryLoad = (props?: UseBlurryLoadProps) => {
+  const { toBlurImages = [] } = props ?? {};
+
+  useEffect(() => {
+    const images: Element[] = [...toBlurImages];
+    if (toBlurImages.length === 0) {
+      images.push(...document.querySelectorAll('.blurry-load'));
+    }
+
+    const lazyImageObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) return;
+
+        const image = entry.target;
+        const currentImage = new Image();
+        currentImage.setAttribute(
+          'src',
+          image.getAttribute('data-large') ?? ''
+        );
+
+        currentImage.onload = () => {
+          image.setAttribute('src', currentImage.src);
+          image.classList.add('blur-out');
+        };
+        lazyImageObserver.unobserve(image);
+      });
+    });
+
+    images.forEach((img) => lazyImageObserver.observe(img));
+  }, [toBlurImages]);
+};