UPDATE: Add LoadingScreen component to maintain consistency

frontend/src/pages/AllCategoriesPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import ListRow from "../components/Layout/ListRow";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
+import LoadingScreen from "../components/Layout/LoadingScreen";
 
 interface categoryData {
   type: "category";
@@ -78,13 +79,7 @@ const AllCategoriesPage: React.FC = () => {
 
   fetchContentOnScroll(loadOnScroll, hasMoreData);
 
-  if (hasMoreData && !categories.length) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center text-white">
-        Loading...
-      </div>
-    );
-  }
+  if (hasMoreData && !categories.length) return <LoadingScreen />;
 
   const handleCategoryClick = (categoryName: string) => {
     console.log(categoryName);

frontend/src/pages/CategoryPage.tsx

@@ -7,6 +7,7 @@ import Button from "../components/Input/Button";
 import { useAuth } from "../context/AuthContext";
 import { useCategoryFollow } from "../hooks/useCategoryFollow";
 import { ListItemProps as StreamData } from "../components/Layout/ListItem";
+import LoadingScreen from "../components/Layout/LoadingScreen";
 
 const CategoryPage: React.FC = () => {
   const { categoryName } = useParams<{ categoryName: string }>();
@@ -92,13 +93,7 @@ const CategoryPage: React.FC = () => {
     window.location.href = `/${streamerName}`;
   };
 
-  if (hasMoreData && !streams.length) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center text-white">
-        Loading...
-      </div>
-    );
-  }
+  if (hasMoreData && !streams.length) return <LoadingScreen />;
 
   return (
     <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]">

frontend/src/pages/HomePage.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { useStreams, useCategories } from "../context/ContentContext";
 import Button from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import LoadingScreen from "../components/Layout/LoadingScreen";
 
 interface HomePageProps {
   variant?: "default" | "personalised";
@@ -23,7 +24,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   };
 
   if (!categories || categories.length === 0) {
-    return <div>Loading categories...</div>;
+    return <LoadingScreen>Loading Categories...</LoadingScreen>;
   }
 
   return (

frontend/src/pages/UserPage.tsx

@@ -8,6 +8,7 @@ import { useFollow } from "../hooks/useFollow";
 import { useNavigate } from "react-router-dom";
 import Button, { EditButton } from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import LoadingScreen from "../components/Layout/LoadingScreen";
 
 interface UserProfileData {
   id: number;
@@ -100,13 +101,8 @@ const UserPage: React.FC = () => {
     if (loggedInUsername && username) checkFollowStatus(username);
   }, [username]);
 
-  if (!profileData) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center text-white">
-        Loading...
-      </div>
-    );
-  }
+  if (!profileData) return <LoadingScreen />;
+
   return (
     <DynamicPageContent
       className={`min-h-screen ${
@@ -226,7 +222,7 @@ const UserPage: React.FC = () => {
                       id={profileData.id}
                       type="stream"
                       title={profileData.currentStreamTitle || ""}
-                      streamer=""
+                      username=""
                       viewers={profileData.currentStreamViewers || 0}
                       thumbnail={profileData.currentStreamThumbnail}
                       onItemClick={() => {

frontend/src/pages/VideoPage.tsx

@@ -37,7 +37,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const [isStripeReady, setIsStripeReady] = useState(false);
   const [showCheckout, setShowCheckout] = useState(false);
-  const showReturn = window.location.search.includes("session_id");
+  // const showReturn = window.location.search.includes("session_id"); //! Not used
   const navigate = useNavigate();
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [timeStarted, setTimeStarted] = useState("");