UPDATE: Add LoadingScreen component to maintain consistency

frontend/src/context/ContentContext.tsx

@@ -72,6 +72,7 @@ export function ContentProvider({ children }: { children: React.ReactNode }) {
     const categoriesUrl = isLoggedIn
       ? "/api/categories/recommended"
       : "/api/categories/popular/4";
+    console.log("Fetching categories from", categoriesUrl);
 
     fetch(categoriesUrl)
       .then((response) => response.json())
@@ -86,6 +87,7 @@ export function ContentProvider({ children }: { children: React.ReactNode }) {
             .replace(/ /g, "_")}.webp`,
         }));
         setCategories(processedCategories);
+        console.log("Categories fetched", processedCategories);
       });
   }, [isLoggedIn]);
 

frontend/src/context/SocketContext.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { io, Socket } from "socket.io-client";
+import LoadingScreen from "../components/Layout/LoadingScreen";
 
 interface SocketContextType {
   socket: Socket | null;
@@ -86,13 +87,7 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
     };
   }, []);
 
-  if (isLoading) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center">
-        <div className="text-4xl text-white">Connecting to socket...</div>
-      </div>
-    );
-  }
+  if (isLoading) return <LoadingScreen>Connecting to Socket...</LoadingScreen>;
 
   return (
     <SocketContext.Provider value={{ socket, isConnected }}>