Add discover to homepage

src/pages/HomePage.tsx

@@ -3,17 +3,18 @@ import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { To, useNavigate } from "react-router-dom";
 
+import { Spinner } from "@/components/layout/Spinner";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { useDebounce } from "@/hooks/useDebounce";
 import { useRandomTranslation } from "@/hooks/useRandomTranslation";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
-import { Button } from "@/pages/About";
 import { HomeLayout } from "@/pages/layouts/HomeLayout";
 import { BookmarksPart } from "@/pages/parts/home/BookmarksPart";
 import { HeroPart } from "@/pages/parts/home/HeroPart";
 import { WatchingPart } from "@/pages/parts/home/WatchingPart";
 import { SearchListPart } from "@/pages/parts/search/SearchListPart";
 import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
+import DiscoverContent from "@/utils/discoverContent";
 
 function useSearch(search: string) {
   const [searching, setSearching] = useState<boolean>(false);
@@ -53,6 +54,22 @@ export function HomePage() {
     navigate(path);
   };
 
+  // State to track whether content is loading or loaded
+  const [loading, setLoading] = useState(true);
+
+  // Simulate loading media cards
+  useEffect(() => {
+    const simulateLoading = async () => {
+      // Simulate a loading time with setTimeout or fetch data here
+      await new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      }); // Simulate 2s loading time
+      setLoading(false); // After loading, set loading to false
+    };
+
+    simulateLoading();
+  }, []);
+
   return (
     <HomeLayout showBg={showBg}>
       <div className="mb-16 sm:mb-24">
@@ -72,25 +89,33 @@ export function HomePage() {
         ) : s.searching ? (
           <SearchListPart searchQuery={search} />
         ) : (
-          <>
-            <div className="flex flex-col gap-8">
-              <WatchingPart onItemsChange={setShowWatching} />
-              <BookmarksPart onItemsChange={setShowBookmarks} />
-            </div>
-            {!(showBookmarks || showWatching) ? (
-              <div className="flex flex-col items-center justify-center">
-                <p className="text-[18.5px] pb-3">{emptyText}</p>
-                <Button
-                  className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
-                  onClick={() => handleClick("/discover")}
-                >
-                  {t("home.search.discover")}
-                </Button>
-              </div>
-            ) : null}
-          </>
+          <div className="flex flex-col gap-8">
+            <WatchingPart onItemsChange={setShowWatching} />
+            <BookmarksPart onItemsChange={setShowBookmarks} />
+          </div>
         )}
+        {!(showBookmarks || showWatching) ? (
+          <div className="flex flex-col translate-y-[-30px] items-center justify-center">
+            <p className="text-[18.5px] pb-3">{emptyText}</p>
+          </div>
+        ) : null}
       </WideContainer>
+      {/* Conditional rendering: show loading screen or the content */}
+      {loading ? (
+        <div className="flex flex-col justify-center items-center h-64 space-y-4">
+          <Spinner />
+          <p className="text-lg font-medium text-gray-400 animate-pulse mt-4">
+            Fetching the latest movies & TV shows...
+          </p>
+          <p className="text-sm text-gray-500">
+            Please wait while we load the best recommendations for you.
+          </p>
+        </div>
+      ) : (
+        <div className="pt-10 px-0 w-full max-w-[100dvw] justify-center items-center">
+          <DiscoverContent />
+        </div>
+      )}
     </HomeLayout>
   );
 }