Merge changes from author

ui-applications/packages/gallery-ui/src/pages/Home/components/PhotoGallery.tsx

@@ -2,15 +2,15 @@ import { useEffect, useMemo, useState } from "react";
 import { PhotoItem } from "../../../types/GalleryApiTypes"
 import { motion } from "framer-motion";
 import { getPhotoVariants } from "../utils/photoGalleryHelper";
-import { Position } from "../utils/constants";
+import { Position, pageSize, positionIndexesArray } from "../utils/constants";
 
 interface IPhotoGalleryProps {
     photoItems: PhotoItem[]
 }
 
 const PhotoGallery = ({ photoItems }: IPhotoGalleryProps) => {
+    const [positionIndexes, setPositionIndexes] = useState(positionIndexesArray);
 
-    const [positionIndexes, setPositionIndexes] = useState([0, 1, 2, 3, 4]);
     const handleNext = () => {
         setPositionIndexes((prevIndexes) => {
             const updatedIndexes = prevIndexes.map(
@@ -21,14 +21,16 @@ const PhotoGallery = ({ photoItems }: IPhotoGalleryProps) => {
     };
 
     useEffect(() => {
-        const interval = setInterval(() => {
-            handleNext();
-        }, 5000);
+        if (photoItems.length === pageSize) {
+            const interval = setInterval(() => {
+                handleNext();
+            }, 5000);
 
-        return () => {
-            clearInterval(interval);
-        };
-    }, []);
+            return () => {
+                clearInterval(interval);
+            };
+        }
+    }, [photoItems]);
 
 
     const variants = useMemo(() => {
@@ -47,10 +49,11 @@ const PhotoGallery = ({ photoItems }: IPhotoGalleryProps) => {
                     initial={Position.Center}
                     animate={positions[positionIndexes[index]]}
                     variants={variants}
-                    transition={{ duration: 0.75 }}
+                    transition={{ duration: 1 }}
                     style={{ width: "40%", position: "absolute" }}
                 />
-            ))}
+            )
+            )}
         </div>
     )
 }

ui-applications/packages/gallery-ui/src/pages/Home/utils/constants.ts

@@ -1,9 +1,9 @@
 export enum Position {
     Center = "center",
-    Left =  "left",
-    Right =  "right",
-    Left1 =  "left1",
-    Right1 =  "right1",
+    Left = "left",
+    Right = "right",
+    Left1 = "left1",
+    Right1 = "right1",
 }
 
 export type PhotoVariant = {
@@ -18,4 +18,7 @@ export const imageVariants: Record<Position, PhotoVariant> = {
     [Position.Right]: { x: "90%", scale: 0.5, zIndex: 1 },
     [Position.Left1]: { x: "-50%", scale: 0.7, zIndex: 3 },
     [Position.Right1]: { x: "50%", scale: 0.7, zIndex: 3 },
-};
+};
+
+export const pageSize = 5
+export const positionIndexesArray = [0, 1, 2, 3, 4]