From 27b7a3ef52ddd04fb0c43134a20ff5e343dc7818 Mon Sep 17 00:00:00 2001 From: Tejas Benibagde <124677750+tejasbenibagde@users.noreply.github.com> Date: Sat, 5 Oct 2024 08:01:31 +0000 Subject: [PATCH] Fix: Added Lazy load to few images --- frontend/package.json | 1 + frontend/src/components/Pages/Boardgame.jsx | 423 +++++++++--------- frontend/src/components/ui/Landing.jsx | 70 ++- frontend/src/components/ui/ReviewCarousel.jsx | 26 +- 4 files changed, 262 insertions(+), 258 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 02011c3..f4413df 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,6 +23,7 @@ "react-dom": "^18.3.1", "react-icons": "^5.2.1", "react-intersection-observer": "^9.13.0", + "react-lazy-load-image-component": "^1.6.2", "react-pageflip": "^2.0.3", "react-router-dom": "^6.24.1", "split-type": "^0.3.4", diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index ede290f..e31ee1b 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -9,232 +9,235 @@ import board8 from "../../assets/Boardgames/board8.png"; import board10 from "../../assets/Boardgames/board10.png"; import bg from "../../assets/Boardgames/bg.jpg"; +import { LazyLoadImage } from 'react-lazy-load-image-component'; +import 'react-lazy-load-image-component/src/effects/blur.css'; export default function Boardgame() { return ( <> -
-
-
-
-
-

- Discover Our Boardgame Collection -

-

- Explore our diverse selection of captivating boardgames, perfect for game nights, family gatherings, and strategic adventures. -

+
+
+
+
+
+

+ Discover Our Boardgame Collection +

+

+ Explore our diverse selection of captivating boardgames, perfect for game nights, family gatherings, and strategic adventures. +

+
+
- Boardgame Hero -
-
-
-
-
- - View - - Catan -
-

Catan

-

- Settle the island of Catan in this classic resource management game. -

+
+
+
+
+ + View + + Catan +
+

Catan

+

+ Settle the island of Catan in this classic resource management game. +

+
-
-
- - View - - Ticket to Ride -
-

Ticket to Ride

-

- Connect cities across a map and complete your railway routes. -

+
+ + View + + Ticket to Ride +
+

Ticket to Ride

+

+ Connect cities across a map and complete your railway routes. +

+
-
-
- - View - - Pandemic -
-

Pandemic

-

- Work together to contain the spread of deadly diseases across the globe. -

+
+ + View + + Pandemic +
+

Pandemic

+

+ Work together to contain the spread of deadly diseases across the globe. +

+
-
-
- - View - - Codenames -
-

Codenames

-

- Compete to make word associations and guess your teams secret code words. -

+
+ + View + + Codenames +
+

Codenames

+

+ Compete to make word associations and guess your teams secret code words. +

+
-
-
- - View - - Azul -
-

Azul

-

- Collect and place beautiful tiles to decorate the walls of a palace. -

+
+ + View + + Azul +
+

Azul

+

+ Collect and place beautiful tiles to decorate the walls of a palace. +

+
-
-
- - View - - Azul -
-

Azul

-

- Collect and place beautiful tiles to decorate the walls of a palace. -

+
+ + View + + Azul +
+

Azul

+

+ Collect and place beautiful tiles to decorate the walls of a palace. +

+
-
-
- - View - - Azul -
-

Azul

-

- Collect and place beautiful tiles to decorate the walls of a palace. -

+
+ + View + + Azul +
+

Azul

+

+ Collect and place beautiful tiles to decorate the walls of a palace. +

+
-
-
- - View - - Azul -
-

Azul

-

- Collect and place beautiful tiles to decorate the walls of a palace. -

+
+ + View + + Azul +
+

Azul

+

+ Collect and place beautiful tiles to decorate the walls of a palace. +

+
-
-
- - View - - Wingspan -
-

Wingspan

-

- Attract and collect birds in this relaxing engine-building game. -

+
+ + View + + Wingspan +
+

Wingspan

+

+ Attract and collect birds in this relaxing engine-building game. +

+
-
-
-
-
-

- Subscribe to our Newsletter -

-

- Stay updated with our latest boardgame collections, special offers, and events. Subscribe now and never miss out! -

-
- - -
-
-
-
+ +
+
+

+ Subscribe to our Newsletter +

+

+ Stay updated with our latest boardgame collections, special offers, and events. Subscribe now and never miss out! +

+
+ + +
+
+
+ ); } diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx index b070cf9..aa50f3e 100644 --- a/frontend/src/components/ui/Landing.jsx +++ b/frontend/src/components/ui/Landing.jsx @@ -3,16 +3,17 @@ import coffecup from "../../assets/landing/coffecup.png"; import { useEffect, useRef } from "react"; import SplitType from "split-type"; import gsap from "gsap"; +import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component'; +import 'react-lazy-load-image-component/src/effects/blur.css'; - -export default function Landing() { +function Landing() { const textRef = useRef(null); useEffect(() => { const splitText = new SplitType(textRef.current, { types: "chars, words" }) const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 }); - + // Set initial opacity to 0 for all characters gsap.set(splitText.chars, { opacity: 0 }); @@ -22,13 +23,13 @@ export default function Landing() { stagger: 0.1, ease: 'power1.inOut', }) - .to(splitText.chars, { - opacity: 0, - duration: 0.1, - stagger: 0.1, - ease: 'power1.inOut', - delay: 1 - }); + .to(splitText.chars, { + opacity: 0, + duration: 0.1, + stagger: 0.1, + ease: 'power1.inOut', + delay: 1 + }); }); return ( @@ -43,43 +44,30 @@ export default function Landing() {
-
- -
-
- -
+
+ +
+ +
+ +
+
-
- {/*
-

- Our name says it all! -

-

- Founder, Jonathan Li, shares a passion for board games, boba, and - delicious food, so he combined them all to become Sip & Play, Park - Slope’s first board game cafe. It is a straightforward concept: come - in with your friends and family to play any board game from our - library of 300+ games! We hope when you visit, you also enjoy our - coffee, espresso, boba, sandwiches, and snacks! -

- - -
*/} - +
- +

@@ -90,3 +78,5 @@ export default function Landing() {

); } + +export default trackWindowScroll(Landing) \ No newline at end of file diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx index 38094e4..c6356e3 100644 --- a/frontend/src/components/ui/ReviewCarousel.jsx +++ b/frontend/src/components/ui/ReviewCarousel.jsx @@ -1,5 +1,7 @@ -import { useState,useEffect } from "react"; +import { useState, useEffect } from "react"; import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md"; +import { LazyLoadImage } from 'react-lazy-load-image-component'; +import 'react-lazy-load-image-component/src/effects/blur.css'; const ReviewCarousel = () => { const reviews = [ @@ -55,7 +57,7 @@ const ReviewCarousel = () => { const [currentIndex, setCurrentIndex] = useState(0); const [showMoreStates, setShowMoreStates] = useState( - reviews.map(() => false) + reviews.map(() => false) ); const toggleShowMore = (index) => { @@ -75,18 +77,18 @@ const ReviewCarousel = () => { prevIndex === 0 ? reviews.length - 4 : prevIndex - 1 ); }; - const [cardsToShow, setCardsToShow] = useState(1); + const [cardsToShow, setCardsToShow] = useState(1); const updateCardsToShow = () => { if (window.innerWidth >= 768) { - setCardsToShow(4); + setCardsToShow(4); } else { - setCardsToShow(1); + setCardsToShow(1); } }; useEffect(() => { - updateCardsToShow(); + updateCardsToShow(); window.addEventListener("resize", updateCardsToShow); return () => { @@ -118,11 +120,19 @@ const ReviewCarousel = () => { >
- + /> */} +

{review.name}

{Array(review.rating)