fix: laoding carousel

vantage-ola · Oct 16, 2024 · 054cb54 · 054cb54
1 parent 56d09f7
commit 054cb54
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 16 deletions.
diff --git a/tracknow/web/src/components/Post/MediaCarousel.tsx b/tracknow/web/src/components/Post/MediaCarousel.tsx
@@ -1,8 +1,8 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
-//import { GetUserLaptimesResponse } from "../../Types";
 import * as React from "react";
 import miscFunctions from "../../misc/miscFunctions";
-import { Box, Button } from "@chakra-ui/react";
+import { Box, Button, Spinner, Text } from "@chakra-ui/react";
+import { LoadingSpinner } from "../Loading/LoadingSpinner";
 
 type MediaItem = {
   type: "youtube" | "image";
@@ -20,35 +20,84 @@ const MediaCarousel: React.FC<MediaCarouselProps> = ({
 }) => {
   const { LazyLoadYoutubeEmbed } = miscFunctions();
   const [currentIndex, setCurrentIndex] = React.useState(0);
-  const mediaItems: MediaItem[] = [
-    youtubeLink && { type: "youtube", content: youtubeLink },
-    image && { type: "image", content: image },
-  ].filter((item): item is MediaItem => Boolean(item));
+  const [loading, setLoading] = React.useState(true);
+
+  const mediaItems: MediaItem[] = React.useMemo(() => {
+    return [
+      youtubeLink && { type: "youtube", content: youtubeLink },
+      image && { type: "image", content: image },
+    ].filter((item): item is MediaItem => Boolean(item));
+  }, [youtubeLink, image]);
 
   const nextSlide = () => {
-    setCurrentIndex((prevIndex) => (prevIndex + 1) % mediaItems.length);
+    if (mediaItems.length > 0) {
+      setLoading(true);
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % mediaItems.length);
+    }
   };
 
   const prevSlide = () => {
-    setCurrentIndex(
-      (prevIndex) => (prevIndex - 1 + mediaItems.length) % mediaItems.length
-    );
+    if (mediaItems.length > 0) {
+      setLoading(true);
+      setCurrentIndex(
+        (prevIndex) => (prevIndex - 1 + mediaItems.length) % mediaItems.length
+      );
+    }
   };
 
-  if (mediaItems.length === 0) return null;
+  const handleLoad = () => {
+    setLoading(false);
+  };
+
+  React.useEffect(() => {
+    if (mediaItems.length > 0 && mediaItems[currentIndex]?.type === "youtube") {
+      const timer = setTimeout(() => {
+        setLoading(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [currentIndex, mediaItems]);
+
+  if (mediaItems.length === 0) {
+    return (
+      <Text fontSize={"xs"} color={"GrayText"}>
+        No media items available.
+      </Text>
+    );
+  }
+
+  const currentItem = mediaItems[currentIndex];
+
+  if (!currentItem) {
+    return <Text>Error: Unable to display media item.</Text>;
+  }
 
   return (
-    <Box position="relative">
-      {mediaItems[currentIndex].type === "youtube" ? (
-        <LazyLoadYoutubeEmbed youtubeLink={mediaItems[currentIndex].content} />
+    <Box position="relative" maxWidth="100%" height="auto" overflow="hidden">
+      {loading && (
+        <Box
+          position="absolute"
+          top="50%"
+          left="50%"
+          transform="translate(-50%, -50%)"
+          zIndex="1"
+        >
+          <LoadingSpinner />
+        </Box>
+      )}
+      {currentItem.type === "youtube" ? (
+        <LazyLoadYoutubeEmbed youtubeLink={currentItem.content} />
       ) : (
         <Box
           as="img"
-          src={mediaItems[currentIndex].content}
+          src={currentItem.content}
           alt="User uploaded image"
           width="100%"
           height="auto"
           objectFit="cover"
+          opacity={loading ? 0 : 1}
+          transition="opacity 0.5s ease-in-out"
+          onLoad={handleLoad}
         />
       )}
       {mediaItems.length > 1 && (
@@ -63,6 +112,7 @@ const MediaCarousel: React.FC<MediaCarouselProps> = ({
             variant="postButton"
             height={10}
             width={10}
+            zIndex="2"
           >
             <ChevronLeftIcon />
           </Button>
@@ -76,6 +126,7 @@ const MediaCarousel: React.FC<MediaCarouselProps> = ({
             variant="postButton"
             height={10}
             width={10}
+            zIndex="2"
           >
             <ChevronRightIcon />
           </Button>

diff --git a/tracknow/web/src/tracknowTheme.ts b/tracknow/web/src/tracknowTheme.ts
@@ -19,6 +19,13 @@ const drawer = defineDrawerPartsStyle({
 
 })
 
+const postButton = defineStyle({
+    color: 'white',
+    backgroundColor: '#1e2021',
+    _hover: { bg: 'dark' },
+
+})
+
 const navbarButton = defineStyle({
     _hover: { bg: '#1e2021' },
     color: 'white',
@@ -69,7 +76,7 @@ const baseStyle = definePartsStyle({
     }
 })
 export const badgeTheme = defineStyleConfig({
-    variants: { navbarButton }
+    variants: { navbarButton, postButton }
 })
 
 export const linkTheme = defineStyleConfig({