UPDATE: Have Stripe only load on pages it's needed;

FIX: Pass proper prop through `ContentContext`;

frontend/src/components/Checkout/CheckoutForm.tsx

@@ -1,63 +1,68 @@
 import React, { useState, useEffect } from "react";
-import { loadStripe } from "@stripe/stripe-js";
+import type { Stripe } from "@stripe/stripe-js";
 import {
   EmbeddedCheckoutProvider,
   EmbeddedCheckout,
 } from "@stripe/react-stripe-js";
-import { Navigate } from "react-router-dom";
 
-const API_URL = import.meta.env.VITE_API_URL;
+//! Unsure whether this component is used/needed in the project
+// export const Return: React.FC = () => {
+//   const [status, setStatus] = useState<string | null>(null);
+//   const [customerEmail, setCustomerEmail] = useState("");
 
-// Initialize Stripe once
-const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);
+//   useEffect(() => {
+//     const queryString = window.location.search;
+//     const urlParams = new URLSearchParams(queryString);
+//     const sessionId = urlParams.get("session_id");
 
-export const Return: React.FC = () => {
-  const [status, setStatus] = useState<string | null>(null);
-  const [customerEmail, setCustomerEmail] = useState("");
+//     if (sessionId) {
+//       console.log("1");
+//       fetch(`/api/session-status?session_id=${sessionId}`)
+//         .then((res) => res.json())
+//         .then((data) => {
+//           console.log("Response Data:", data);
+//           setStatus(data.status);
+//           setCustomerEmail(data.customer_email);
+//         });
+//     }
+//   }, []);
 
-  useEffect(() => {
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const sessionId = urlParams.get("session_id");
+//   if (status === "open") {
+//     return <Navigate to="/checkout" />;
+//   }
 
-    if (sessionId) {
-      console.log("1");
-      fetch(`/api/session-status?session_id=${sessionId}`)
-        .then((res) => res.json())
-        .then((data) => {
-          console.log("Response Data:", data);
-          setStatus(data.status);
-          setCustomerEmail(data.customer_email);
-        });
-    }
-  }, []);
+//   if (status === "complete") {
+//     return (
+//       <section id="success">
+//         <p>
+//           We appreciate your business! A confirmation email will be sent to{" "}
+//           {customerEmail}. If you have any questions, please email{" "}
+//           <a href="mailto:orders@example.com">orders@example.com</a>.
+//         </p>
+//       </section>
+//     );
+//   }
 
-  if (status === "open") {
-    return <Navigate to="/checkout" />;
-  }
+//   return null;
+// };
 
-  if (status === "complete") {
-    return (
-      <section id="success">
-        <p>
-          We appreciate your business! A confirmation email will be sent to{" "}
-          {customerEmail}. If you have any questions, please email{" "}
-          <a href="mailto:orders@example.com">orders@example.com</a>.
-        </p>
-      </section>
-    );
-  }
-
-  return null;
-};
-
-// Main CheckoutForm component
 interface CheckoutFormProps {
   streamerID: number;
   onClose: () => void;
 }
 
-const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose, streamerID }) => {
+const CheckoutForm: React.FC<CheckoutFormProps> = ({ streamerID, onClose }) => {
+  const [stripePromise, setStripePromise] =
+    useState<Promise<Stripe | null> | null>(null);
+
+  useEffect(() => {
+    const initializeStripe = async () => {
+      const { loadStripe } = await import("@stripe/stripe-js");
+      setStripePromise(loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY));
+    };
+    initializeStripe();
+  }, []);
+
   const fetchClientSecret = () => {
     return fetch(`/api/create-checkout-session?streamer_id=${streamerID}`, {
       method: "POST",

frontend/src/context/ContentContext.tsx

@@ -11,7 +11,7 @@ interface Item {
 
 interface StreamItem extends Item {
   type: "stream";
-  streamer: string;
+  username: string;
   streamCategory: string;
 }
 
@@ -56,7 +56,7 @@ export function ContentProvider({ children }: { children: React.ReactNode }) {
           type: "stream",
           id: stream.user_id,
           title: stream.title,
-          streamer: stream.username,
+          username: stream.username,
           streamCategory: stream.category_name,
           viewers: stream.num_viewers,
           thumbnail:

frontend/src/pages/CategoryPage.tsx

@@ -49,7 +49,7 @@ const CategoryPage: React.FC = () => {
 
       setStreamOffset((prev) => prev + data.length);
 
-      const processedStreams = data.map((stream: any) => ({
+      const processedStreams: StreamData[] = data.map((stream: any) => ({
         type: "stream",
         id: stream.user_id,
         title: stream.title,
@@ -80,9 +80,10 @@ const CategoryPage: React.FC = () => {
   const logOnScroll = async () => {
     if (hasMoreData && listRowRef.current) {
       const newCategories = await fetchCategoryStreams();
-      if (newCategories?.length > 0) {
+      if (newCategories && newCategories.length > 0) {
         listRowRef.current.addMoreItems(newCategories);
       }
+      else console.log("No more data to fetch");
     }
   };
 

frontend/src/pages/VideoPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import { ToggleButton } from "../components/Input/Button";
 import ChatPanel from "../components/Stream/ChatPanel";
 import { useNavigate, useParams } from "react-router-dom";
@@ -8,10 +8,12 @@ import { useFollow } from "../hooks/useFollow";
 import VideoPlayer from "../components/Stream/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
 import AuthModal from "../components/Auth/AuthModal";
-import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { useSidebar } from "../context/SidebarContext";
 
+// Lazy load the CheckoutForm component
+const CheckoutForm = lazy(() => import("../components/Checkout/CheckoutForm"));
+
 interface VideoPageProps {
   streamerId: number;
 }
@@ -33,6 +35,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
     useFollow();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
+  const [isStripeReady, setIsStripeReady] = useState(false);
   const [showCheckout, setShowCheckout] = useState(false);
   const showReturn = window.location.search.includes("session_id");
   const navigate = useNavigate();
@@ -107,6 +110,15 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
     };
   }, []);
 
+  // Load Stripe in the background when component mounts
+  useEffect(() => {
+    const loadStripe = async () => {
+      await import("@stripe/stripe-js");
+      setIsStripeReady(true);
+    };
+    loadStripe();
+  }, []);
+
   const toggleChat = () => {
     setIsChatOpen((prev) => !prev);
   };
@@ -235,26 +247,31 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
             {/* Subscribe Button */}
             <div className="flex flex-col items-center">
               <button
-                className="bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-700 text-sm"
+                className={`bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md 
+    ${
+      isStripeReady ? "hover:bg-red-700" : "opacity-20 cursor-not-allowed"
+    } transition-all`}
                 onClick={() => {
                   if (!isLoggedIn) {
                     setShowAuthModal(true);
-                  } else {
+                  } else if (isStripeReady) {
                     setShowCheckout(true);
                   }
                 }}
               >
-                Subscribe
+                {isStripeReady ? "Subscribe" : "Loading..."}
               </button>
             </div>
           </div>
           {showCheckout && (
-            <CheckoutForm
-              onClose={() => setShowCheckout(false)}
-              streamerID={streamerId}
-            />
+            <Suspense fallback={<div>Loading checkout...</div>}>
+              <CheckoutForm
+                onClose={() => setShowCheckout(false)}
+                streamerID={streamerId}
+              />
+            </Suspense>
           )}
-          {showReturn && <Return />}
+          {/* {showReturn && <Return />} */}
           {showAuthModal && (
             <AuthModal onClose={() => setShowAuthModal(false)} />
           )}