diff --git a/enyugma-backend/database/index.js b/enyugma-backend/database/index.js index 8b3ce6d..2b3f3b1 100644 --- a/enyugma-backend/database/index.js +++ b/enyugma-backend/database/index.js @@ -39,7 +39,6 @@ export default class Database { this.client.query(`CREATE TABLE IF NOT EXISTS users ( name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL, - password VARCHAR(255) NOT NULL, college VARCHAR(255) NOT NULL, state VARCHAR(255) NOT NULL, city VARCHAR(255) NOT NULL, @@ -60,11 +59,11 @@ export default class Database { async createUser(user) { // postgres query for inserting a user return this.client.query( - "INSERT INTO users (name, email, password, college, state, city, pincode, type, events, teamSize, teamMembers, token, transactionId) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10,$11,$12,$13)", + "INSERT INTO users (name, email, college, state, city, pincode, type, events, teamSize, teamMembers, token, transactionId) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10,$11,$12)", [ user.name, user.email, - user.password, + // user.password, user.college, user.state, user.city, @@ -132,11 +131,11 @@ export default class Database { async modifyUser(email, user) { // postgres query for modifying a user where provided data might not be complete return this.client.query( - "UPDATE users SET name=$1, email=$2, password=$3, college=$4, state=$5, city=$6, pincode=$7, type=$8,events=$9, teamSize=$10, teamMembers=$11 WHERE email=$12", + "UPDATE users SET name=$1, email=$2, college=$3, state=$4, city=$5, pincode=$6, type=$7,events=$8, teamSize=$9, teamMembers=$10 WHERE email=$11", [ user.name, user.email, - user.password, + // user.password, user.college, user.state, user.city, diff --git a/enyugma-frontend/src/App.jsx b/enyugma-frontend/src/App.jsx index dcb7c5d..57e378d 100644 --- a/enyugma-frontend/src/App.jsx +++ b/enyugma-frontend/src/App.jsx @@ -1,65 +1,191 @@ import "./App.scss"; import { Routes, Route } from "react-router-dom"; -import { useEffect, useState } from "react"; -import Home from "./Pages/Home/index.jsx"; -import TechnicalEvent from "./Pages/TechnicalEvent"; +import { useEffect, useState, lazy, Suspense } from "react"; +// import Home from "./Pages/Home/index.jsx"; +// import TechnicalEvent from "./Pages/TechnicalEvent"; import GlowBall from "./Components/cursor/index.jsx"; import Footer from "./Components/Footer/index.jsx"; import Preloader from "./Components/Preloader/Preloader"; -import Spin from "./Components/Spin/Preloader"; -import CulturalEvent from "./Pages/CulturalEvent/index.jsx"; -import GalleryPage from "./Pages/Gallery/index.jsx"; -import Events from "./Pages/Events/index.jsx"; -import EventDetail from "./Pages/EventDetail/index.jsx"; -import SponsorCard from "./Components/SponsorCard/index.jsx"; -import Sponsors from "./Pages/Sponsors/index.jsx"; -import WorkshopEvent from "./Pages/WorkshopEvent/index.jsx"; -import Register from "./Pages/Register/index.jsx"; +// import Spin from "./Components/Spin/Preloader"; +// import CulturalEvent from "./Pages/CulturalEvent/index.jsx"; +// import GalleryPage from "./Pages/Gallery/index.jsx"; +// import Events from "./Pages/Events/index.jsx"; +// import EventDetail from "./Pages/EventDetail/index.jsx"; +// import SponsorCard from "./Components/SponsorCard/index.jsx"; +// import Sponsors from "./Pages/Sponsors/index.jsx"; +// import WorkshopEvent from "./Pages/WorkshopEvent/index.jsx"; +// import Register from "./Pages/Register/index.jsx"; +// lazy loading +const Home = lazy(() => import("./Pages/Home/index.jsx")); +const TechnicalEvent = lazy(() => import("./Pages/TechnicalEvent")); + +const CulturalEvent = lazy(() => import("./Pages/CulturalEvent/index.jsx")); +const GalleryPage = lazy(() => import("./Pages/Gallery/index.jsx")); +const Events = lazy(() => import("./Pages/Events/index.jsx")); +const EventDetail = lazy(() => import("./Pages/EventDetail/index.jsx")); +const Sponsors = lazy(() => import("./Pages/Sponsors/index.jsx")); +const WorkshopEvent = lazy(() => import("./Pages/WorkshopEvent/index.jsx")); +const Register = lazy(() => import("./Pages/Register/index.jsx")); function App() { - const [isLoading, setIsLoading] = useState(true); - useEffect(() => { - setTimeout(() => { - setIsLoading(false); - }, 2000); - }, []); + // const [isLoading, setIsLoading] = useState(true); + // useEffect(() => { + // setTimeout(() => { + // setIsLoading(false); + // }, 2000); + // }, []); return ( <> - {isLoading && ( -
- -
- )} -
+
- } /> + + + + } + > + {" "} + + } + /> - } /> + + + + } + > + {" "} + + } + /> - } /> - } /> + + + + } + > + {" "} + + } + /> + + + + } + > + {" "} + + } + /> - } /> - } /> + + + + } + > + {" "} + + } + /> + + + + } + > + {" "} + + } + /> - - } /> - } /> + + + + + } + > + {" "} + + } + /> + + + + } + > + {" "} + + } + /> Contact} /> - } /> - } /> - } /> + }> + {" "} + + } + /> + }> + {" "} + + } + /> + }> + {" "} + + } + />
diff --git a/enyugma-frontend/src/Components/CulturalCard/CulturalCard.jsx b/enyugma-frontend/src/Components/CulturalCard/CulturalCard.jsx index c3d48a1..dd6f003 100644 --- a/enyugma-frontend/src/Components/CulturalCard/CulturalCard.jsx +++ b/enyugma-frontend/src/Components/CulturalCard/CulturalCard.jsx @@ -53,7 +53,7 @@ const CulturalCard = (props) => { }} > { > {/* bg-removebg-preview */}
-
+

{props.name}

{props.description.length > 100 diff --git a/enyugma-frontend/src/Components/CulturalCard/CulturalCard.scss b/enyugma-frontend/src/Components/CulturalCard/CulturalCard.scss index 8c01dda..00c39ac 100644 --- a/enyugma-frontend/src/Components/CulturalCard/CulturalCard.scss +++ b/enyugma-frontend/src/Components/CulturalCard/CulturalCard.scss @@ -1,4 +1,4 @@ -.card { +.ccard { height: 300px; width: 300px; /* border: 1px solid black; */ @@ -22,17 +22,29 @@ justify-content: center; transition: 500ms; - .info { + .cinfo { + width: 100%; + height: 100%; + position: absolute; + bottom: 0px; + padding: 0px 40px; + left: 0; display: flex; flex-direction: column; - align-items: flex-start; justify-content: center; + align-items: flex-start; + z-index: 2; + border-radius: 16px; + color: var(--t); + transition: 500ms; + opacity: 0; + font-size: 20px; gap: 16px; h1, p { // font-family: "Lucida Sans", "Lucida Sans Regular", // "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, - // sans-serif; + // sans-serif; color: white; font-size: 20px; font-weight: 400; diff --git a/enyugma-frontend/src/Components/Footer/footer.scss b/enyugma-frontend/src/Components/Footer/footer.scss index 966de19..3e477dc 100644 --- a/enyugma-frontend/src/Components/Footer/footer.scss +++ b/enyugma-frontend/src/Components/Footer/footer.scss @@ -3,7 +3,7 @@ rgba(6, 12, 32, 1) 20%, rgba(0, 0, 0, 0.7) ), - url(https://wallpaper-house.com/data/out/6/wallpaper2you_112356.webp); + url(https://wallpaper-house.com/data/out/6/wallpaper2you_112356.jpg); color: #fff; padding: 20px; background-size: cover; diff --git a/enyugma-frontend/src/Components/Gallery/gallery.scss b/enyugma-frontend/src/Components/Gallery/gallery.scss index 64513e2..b354170 100644 --- a/enyugma-frontend/src/Components/Gallery/gallery.scss +++ b/enyugma-frontend/src/Components/Gallery/gallery.scss @@ -196,4 +196,20 @@ margin: 20px 0px 25px; flex: 0 1 150px; } + + .load { + animation: wave 1.5s infinite ease-in-out; + } + + @keyframes wave { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } + } } diff --git a/enyugma-frontend/src/Components/Gallery/index.jsx b/enyugma-frontend/src/Components/Gallery/index.jsx index 5250711..d3a6b5f 100644 --- a/enyugma-frontend/src/Components/Gallery/index.jsx +++ b/enyugma-frontend/src/Components/Gallery/index.jsx @@ -1,9 +1,11 @@ -import { React, useEffect, useRef } from "react"; +import { React, Suspense, useEffect, useRef } from "react"; import "./gallery.scss"; import { useState } from "react"; import { gallery } from "./list.js"; +import useImagePreloader from "../../hooks/useImagePreloader.jsx"; const Gallery = () => { + const { imagesPreloaded } = useImagePreloader(gallery); const [images, setImages] = useState(gallery); const [selectedImage, setSelectedImage] = useState(null); @@ -18,7 +20,7 @@ const Gallery = () => { const List = ({ label, link, LiClass }) => (

  • handleImageClick(link)}> - +
    {label}
    • ); @@ -54,6 +56,7 @@ const Gallery = () => {


    + {!imagesPreloaded ? : <>
      {
    )} + + }
    ); }; @@ -301,3 +306,239 @@ function shuffle(arr) { } return arr; } + + +function GallerySkeleton() { + const images = []; + const List = ({ label, link, LiClass }) => ( +
  • + +
    {label}
    +
    • + ); + return ( + <> + + + + + + + + ); +} \ No newline at end of file diff --git a/enyugma-frontend/src/Components/SponsorCard/index.scss b/enyugma-frontend/src/Components/SponsorCard/index.scss index b51ce8b..6ab337e 100644 --- a/enyugma-frontend/src/Components/SponsorCard/index.scss +++ b/enyugma-frontend/src/Components/SponsorCard/index.scss @@ -36,6 +36,7 @@ align-items: center; justify-content: center; aspect-ratio: 1; + width: 100%; position: relative; // margin: 1rem; border-radius: 2rem; diff --git a/enyugma-frontend/src/Components/TechnicalCard/TechnicalCard.jsx b/enyugma-frontend/src/Components/TechnicalCard/TechnicalCard.jsx index 9c412ea..f600488 100644 --- a/enyugma-frontend/src/Components/TechnicalCard/TechnicalCard.jsx +++ b/enyugma-frontend/src/Components/TechnicalCard/TechnicalCard.jsx @@ -21,7 +21,7 @@ useEffect(() => { return ( { return ( -
    +
    {/*
    */}

    {props.name}

    diff --git a/enyugma-frontend/src/Components/WorkShopCard/index.scss b/enyugma-frontend/src/Components/WorkShopCard/index.scss index 856b02c..02c8102 100644 --- a/enyugma-frontend/src/Components/WorkShopCard/index.scss +++ b/enyugma-frontend/src/Components/WorkShopCard/index.scss @@ -1,10 +1,10 @@ -.box { +.wbox { position: relative; &:hover > .info { opacity: 1; } } -.box:before { +.wbox:before { position: absolute; content: ""; width: calc(100% + 30px); @@ -16,18 +16,18 @@ opacity: 1; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); } -.box:hover:before { +.wbox:hover:before { transform: translate(-50%, -50%) scale(1); filter: blur(50px); } -.box-inner { +.wbox-inner { position: relative; width: 100%; height: 100%; } -// .box:before, -.box-inner { +// .wbox:before, +.wbox-inner { // background-color: #440099; // box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.58); border-radius: 21px; diff --git a/enyugma-frontend/src/Pages/CulturalEvent/index.jsx b/enyugma-frontend/src/Pages/CulturalEvent/index.jsx index 845b0ac..ab4989e 100644 --- a/enyugma-frontend/src/Pages/CulturalEvent/index.jsx +++ b/enyugma-frontend/src/Pages/CulturalEvent/index.jsx @@ -1,10 +1,11 @@ import "./index.scss"; -import { useState } from "react"; +import { useState, Suspense } from "react"; import events from "./list.js"; import CulturalCard from "../../Components/CulturalCard/CulturalCard.jsx"; import Navbar from "../../Components/Navbar/index.jsx"; import { Box } from "@mui/material"; import Stars2 from "../../Components/Stars2/index.jsx"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; function createCulturalCard(technicalEvent) { return ( @@ -21,74 +22,76 @@ function createCulturalCard(technicalEvent) { export default function CulturalEvent() { return ( <> - -
    -
    - -
    - -

    -
    - C -
    -
    - u -
    -
    - l -
    -
    - t -
    -
    - u -
    -
    - r -
    -
    - a -
    -
    - l -
    -
    -   -
    -
    - E -
    -
    - v -
    -
    - e -
    -
    - n -
    -
    - t + }> + +
    +
    +
    -
    - s + +

    +
    + C +
    +
    + u +
    +
    + l +
    +
    + t +
    +
    + u +
    +
    + r +
    +
    + a +
    +
    + l +
    +
    +   +
    +
    + E +
    +
    + v +
    +
    + e +
    +
    + n +
    +
    + t +
    +
    + s +
    +

    +
    +
    +
    + {events.map(createCulturalCard)}
    -

    -
    -
    -
    - {events.map(createCulturalCard)}
    -
    -     + + ); } diff --git a/enyugma-frontend/src/Pages/EventDetail/index.jsx b/enyugma-frontend/src/Pages/EventDetail/index.jsx index 2b59e3f..301d238 100644 --- a/enyugma-frontend/src/Pages/EventDetail/index.jsx +++ b/enyugma-frontend/src/Pages/EventDetail/index.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { Suspense, useEffect, useState } from "react"; import "./index.scss"; import { useLocation } from "react-router-dom"; import { @@ -21,6 +21,7 @@ import technicalEvent from "../TechnicalEvent/technicalEvent.js"; import culturalEvent from "../CulturalEvent/list.js"; import EventDetailSponsorCard from "../../Components/EventDetailSponsors/index.jsx"; import workshopevents from "../WorkshopEvent/list.js"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; export default function EventDetail() { const location = useLocation(); @@ -95,6 +96,7 @@ export default function EventDetail() { return ( <> + }>
    )} + ); } diff --git a/enyugma-frontend/src/Pages/Events/index.jsx b/enyugma-frontend/src/Pages/Events/index.jsx index 80b6882..6cf2705 100644 --- a/enyugma-frontend/src/Pages/Events/index.jsx +++ b/enyugma-frontend/src/Pages/Events/index.jsx @@ -10,14 +10,17 @@ import Navbar from "../../Components/Navbar/index.jsx"; import { ThemeProvider, createTheme } from "@mui/material"; import { Link } from "react-router-dom"; import workshopevents from "../WorkshopEvent/list.js"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; export default function Events() { return ( <> + }> + ); } diff --git a/enyugma-frontend/src/Pages/Gallery/index.jsx b/enyugma-frontend/src/Pages/Gallery/index.jsx index f3368a0..e7ac3bd 100644 --- a/enyugma-frontend/src/Pages/Gallery/index.jsx +++ b/enyugma-frontend/src/Pages/Gallery/index.jsx @@ -4,6 +4,7 @@ import { Masonry } from "@mui/lab"; import { gallery as list } from "../../Components/Gallery/list.js"; import Navbar from "../../Components/Navbar/index.jsx"; import { Suspense,useEffect,useState } from "react"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; export default function GalleryPage() { const [clm,setClm] = useState( @@ -32,31 +33,30 @@ export default function GalleryPage() { return ( <> - -

    Gallery

    - }> - - {list.map((item, index) => ( -
    - {item.title} -
    - ))} -     -     - -     + }> + +

    Gallery

    + }> + + {list.map((item, index) => ( +
    + {item.title} +
    + ))} +     +     +     +     ); } diff --git a/enyugma-frontend/src/Pages/Home/index.jsx b/enyugma-frontend/src/Pages/Home/index.jsx index aa8a09a..bbe46ea 100644 --- a/enyugma-frontend/src/Pages/Home/index.jsx +++ b/enyugma-frontend/src/Pages/Home/index.jsx @@ -4,15 +4,20 @@ import Grid from "@mui/material/Grid"; import Paper from "@mui/material/Paper"; import Box from "@mui/material/Box"; import { Link } from "react-router-dom"; -import CountdownTimer from "../../Components/CountdownTimer"; +// import CountdownTimer from "../../Components/CountdownTimer"; import banner from "../../assets/banner.webp"; -import Stars from "../../Components/Stars/index.jsx"; -import Gallery from "../../Components/Gallery/index.jsx"; +// import Stars from "../../Components/Stars/index.jsx"; +// import Gallery from "../../Components/Gallery/index.jsx"; import Navbar from "../../Components/Navbar/index.jsx"; import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; -import Wireframe from "../../Components/Logo/index.jsx"; -import { useState } from "react"; +// import Wireframe from "../../Components/Logo/index.jsx"; +import { useState,Suspense,lazy } from "react"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; +const Gallery = lazy(() => import("../../Components/Gallery/index.jsx")); +const Wireframe = lazy(() => import("../../Components/Logo/index.jsx")); +const Stars = lazy(() => import("../../Components/Stars/index.jsx")); +const CountdownTimer = lazy(() => import("../../Components/CountdownTimer.jsx")); const Item = styled(Paper)(({ theme }) => ({ backgroundColor: "transparent", @@ -22,10 +27,12 @@ const Item = styled(Paper)(({ theme }) => ({ export default function Home() { return ( + }>
    +     ); } diff --git a/enyugma-frontend/src/Pages/Register/index.jsx b/enyugma-frontend/src/Pages/Register/index.jsx index 2f19fe4..f8c8ff9 100644 --- a/enyugma-frontend/src/Pages/Register/index.jsx +++ b/enyugma-frontend/src/Pages/Register/index.jsx @@ -20,11 +20,12 @@ import { import Navbar from "../../Components/Navbar/index.jsx"; import cultural4 from "../../assets/bgs/cultural4.webp"; import "./index.scss"; -import { useState } from "react"; +import { Suspense, useState } from "react"; import VisibilityIcon from "@mui/icons-material/Visibility"; import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; import qrcode from "../../assets/qrcode.jpg"; import events from "./eventlist.js"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; export default function Register() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); @@ -56,11 +57,11 @@ export default function Register() { // const [showPassword, setShowPassword] = useState(false); - const handleClickShowPassword = () => setShowPassword((show) => !show); + // const handleClickShowPassword = () => setShowPassword((show) => !show); - const handleMouseDownPassword = (event) => { - event.preventDefault(); - }; + // const handleMouseDownPassword = (event) => { + // event.preventDefault(); + // }; const darkTheme = createTheme({ palette: { @@ -194,6 +195,7 @@ export default function Register() { }; return ( + }>
    +
    +
    +     ); } diff --git a/enyugma-frontend/src/Pages/Register/index.scss b/enyugma-frontend/src/Pages/Register/index.scss index 64ae904..2d45240 100644 --- a/enyugma-frontend/src/Pages/Register/index.scss +++ b/enyugma-frontend/src/Pages/Register/index.scss @@ -7,6 +7,7 @@ align-items: center; justify-content: flex-start; gap: 64px; + position: relative; .form, .qrcode { @@ -62,3 +63,16 @@ } } } + +.overlay { + width: 100%; + height: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 64px; + position: relative; + background-color: rgba(6, 12, 32, 0.3); +} diff --git a/enyugma-frontend/src/Pages/Sponsors/index.jsx b/enyugma-frontend/src/Pages/Sponsors/index.jsx index f22696c..4ce5686 100644 --- a/enyugma-frontend/src/Pages/Sponsors/index.jsx +++ b/enyugma-frontend/src/Pages/Sponsors/index.jsx @@ -4,10 +4,12 @@ import SponsorCard from "../../Components/SponsorCard/index.jsx"; import "./index.scss"; import cultural from "../../assets/bgs/cultural5.webp"; import sponsorList from "./list.js"; -import { useState } from "react"; +import { Suspense, useState } from "react"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; export default function Sponsors() { return ( + }>
    + ); } diff --git a/enyugma-frontend/src/Pages/TechnicalEvent/index.jsx b/enyugma-frontend/src/Pages/TechnicalEvent/index.jsx index c476c6e..bd1b990 100644 --- a/enyugma-frontend/src/Pages/TechnicalEvent/index.jsx +++ b/enyugma-frontend/src/Pages/TechnicalEvent/index.jsx @@ -1,10 +1,11 @@ import "./index.scss"; -import { useState } from "react"; +import { Suspense, useState } from "react"; import technicalEvent from "./technicalEvent"; import TechnicalCard from "../../Components/TechnicalCard/TechnicalCard"; import Navbar from "../../Components/Navbar"; import { Box, Typography } from "@mui/material"; import Stars2 from "../../Components/Stars2/index.jsx"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; function createTechnicalCard(technicalEvent) { return ( @@ -21,6 +22,7 @@ function createTechnicalCard(technicalEvent) { export default function TechnicalEvent() { return ( <> + }>
    + ); } diff --git a/enyugma-frontend/src/Pages/WorkshopEvent/index.jsx b/enyugma-frontend/src/Pages/WorkshopEvent/index.jsx index 1b1a163..616cdf9 100644 --- a/enyugma-frontend/src/Pages/WorkshopEvent/index.jsx +++ b/enyugma-frontend/src/Pages/WorkshopEvent/index.jsx @@ -1,10 +1,12 @@ import "./index.scss"; -import { useState } from "react"; + +import { useState, Suspense } from "react"; import list from "./list.js"; import WorkshopCard from "../../Components/WorkShopCard"; import Navbar from "../../Components/Navbar"; import { Box, Typography } from "@mui/material"; import Stars2 from "../../Components/Stars2/index.jsx"; +import Preloader from "../../Components/Preloader/Preloader.jsx"; function createTechnicalCard(technicalEvent) { return ( @@ -21,45 +23,77 @@ function createTechnicalCard(technicalEvent) { export default function WorkshopEvent() { return ( <> - -
    - -
    - -
    -

    -
    W
    -
    o
    -
    r
    -
    k
    -
    s
    -
    h
    -
    o
    -
    p
    -
     
    -
    E
    -
    v
    -
    e
    -
    n
    -
    t
    -
    s
    -

    -
    -
    -
    - {list.map(createTechnicalCard)} + }> + +
    + +
    + +
    +

    +
    + W +
    +
    + o +
    +
    + r +
    +
    + k +
    +
    + s +
    +
    + h +
    +
    + o +
    +
    + p +
    +
    +   +
    +
    + E +
    +
    + v +
    +
    + e +
    +
    + n +
    +
    + t +
    +
    + s +
    +

    +
    +
    +
    + {list.map(createTechnicalCard)} +
    -
    - + + ); } diff --git a/enyugma-frontend/src/Pages/WorkshopEvent/index.scss b/enyugma-frontend/src/Pages/WorkshopEvent/index.scss index 5b81620..b4f9eab 100644 --- a/enyugma-frontend/src/Pages/WorkshopEvent/index.scss +++ b/enyugma-frontend/src/Pages/WorkshopEvent/index.scss @@ -32,7 +32,7 @@ z-index: -1; } - .technicalEvent { + .workshopEvent { display: flex; flex-direction: row; diff --git a/enyugma-frontend/src/hooks/useImagePreloader.jsx b/enyugma-frontend/src/hooks/useImagePreloader.jsx new file mode 100644 index 0000000..a47a541 --- /dev/null +++ b/enyugma-frontend/src/hooks/useImagePreloader.jsx @@ -0,0 +1,52 @@ +import { useEffect, useState } from "react"; + +function preloadImage(src) { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = function () { + resolve(img); + }; + img.onerror = img.onabort = function (err) { + // console.log(err) + reject(src); + }; + img.src = src; + }); +} + +export default function useImagePreloader(imageList) { + const [imagesPreloaded, setImagesPreloaded] = useState(false); + + useEffect(() => { + let isCancelled = false; + + async function effect() { + // console.log("PRELOAD"); + + if (isCancelled) { + return; + } + + const imagesPromiseList = []; + for (const i of imageList) { + imagesPromiseList.push(preloadImage(i)); + } + + await Promise.all(imagesPromiseList).catch((err) => {}); + + if (isCancelled) { + return; + } + + setImagesPreloaded(true); + } + + effect(); + + return () => { + isCancelled = true; + }; + }, [imageList, setImagesPreloaded]); + + return { imagesPreloaded }; +}