#179 | Media display performance improvements

- Fetch only one page of search results - Don't request all full-res images on load when carousel is displayed
avniproject · Nov 20, 2024 · 4b6db09 · 4b6db09
1 parent 0ba4123
commit 4b6db09
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/client/components/ImageCarousel.tsx b/client/components/ImageCarousel.tsx
@@ -15,6 +15,7 @@ interface Props {
     imageList: imageType[];
     totalRecords: any;
     carouselImage: any;
+    setCarouselImage: any;
     currentPage: any;
     showPerpage: any,
     onClose: () => void;
@@ -31,7 +32,8 @@ const ImageCarousel = ({
                            onClose,
                            onSelectImage,
                            checkedImage,
-                           minLevelName
+                           minLevelName,
+                           setCarouselImage
                        }: Props) => {
     const ci = carouselImage as never;
     const index = imageList.indexOf(ci);
@@ -99,24 +101,32 @@ const ImageCarousel = ({
                             {showLoader && <Loading />}
                             <Carousel
                                 renderArrowPrev={(clickHandler, hasPrev) => {
+                                    const customClickHandler = () => {
+                                        setCarouselImage(imageList[index - 1]);
+                                        clickHandler();
+                                    }
                                     return (
                                         <div
                                             className={`${
                                                 hasPrev ? "absolute" : "hidden"
                                             } top-0 bottom-20 left-0 flex justify-center items-center p-3 opacity-30 hover:opacity-100 cursor-pointer z-20`}
-                                            onClick={clickHandler}
+                                            onClick={customClickHandler}
                                         >
                                             <NavigateBeforeIcon className="w-9 h-9 text-black rounded-md border border-gray-300 bg-white"/>
                                         </div>
                                     );
                                 }}
                                 renderArrowNext={(clickHandler, hasNext) => {
+                                    const customClickHandler = () => {
+                                        setCarouselImage(imageList[index + 1]);
+                                        clickHandler();
+                                    }
                                     return (
                                         <div
                                             className={`${
                                                 hasNext ? "absolute" : "hidden"
                                             } top-0 bottom-20 right-0 flex justify-center items-center p-3 opacity-30 hover:opacity-100 cursor-pointer z-20`}
-                                            onClick={clickHandler}
+                                            onClick={customClickHandler}
                                         >
                                             <NavigateNextIcon className="w-9 h-9 text-black rounded-md border border-gray-300 bg-white"/>
                                         </div>
@@ -136,7 +146,7 @@ const ImageCarousel = ({
                                         index
                                     ) => (
                                         <div key={index}>
-                                            <img src={getImage(img, false)} className="carousel-image"/>
+                                            <img src={getImage(img, ci !== img)} className="carousel-image"/>
                                             <div className="checkbox">
                                                 <CheckButton
                                                     imageNameWithoutNewLines={getImageNameWithoutNewLines(img, minLevelName)}

diff --git a/client/components/ImageList.tsx b/client/components/ImageList.tsx
@@ -301,11 +301,8 @@ export default function ImageList() {
         const fetchImages = async () => {
             setShowLoader(true);
             const responseData = await MediaSearchService.searchMedia(dataBody, currentPage, showPerpage);
-            const nextPageResponseData = await MediaSearchService.searchMedia(dataBody, currentPage + 1, showPerpage);
-
             setImageList(responseData);
             setShowLoader(false);
-            setNextPageData(nextPageResponseData);
         };
 
         fetchImages();
@@ -943,12 +940,13 @@ export default function ImageList() {
                                 setCheckedImage={[]}
                                 dataBody={dataBody}
                                 minLevelName={minLevelName}
+                                setCarouselImage={setCarouselImage}
                             />
                         )}
                         <Pagination
                             showperpage={showPerpage}
                             pagechange={pageChange}
-                            nextPageData={nextPageData.data}
+                            enableNextPage={imageList.data.length === showPerpage}
                         />
                     </Fragment>}
             </div>

diff --git a/client/components/Pagination.tsx b/client/components/Pagination.tsx
@@ -4,22 +4,14 @@ import { useState, useEffect } from 'react';
 interface Props {
   showperpage: number;
   pagechange: (pageNumber: number) => void;
-  nextPageData: any[];
+  enableNextPage: boolean;
 
 }
-  const Pagination = ({ showperpage, pagechange, nextPageData }: Props) => {
+  const Pagination = ({ showperpage, pagechange, enableNextPage }: Props) => {
   const [counter, setCounter] = useState(1)
 
-  const page = Math.ceil(nextPageData.length / showperpage)
-
   useEffect(() => {
-
-    if (counter == page) {
       pagechange(counter - 1)
-    }
-    else {
-      pagechange(counter -1 )
-    }
   }, [counter, showperpage])
 
 
@@ -33,7 +25,7 @@ interface Props {
       }
     }
     else if (type == "next") {
-      if (nextPageData.length >= 1) {
+      if (enableNextPage) {
         setCounter(counter + 1)
       }
       else{
@@ -67,7 +59,7 @@ interface Props {
       <div className="-mt-px w-0 flex-1 flex justify-start">
         <button
           onClick={() => onButtonclick("next")}
-          disabled={nextPageData.length === 0}
+          disabled={!enableNextPage}
           className="border-t-2 border-transparent pt-1 pl-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
         >
           Next