UPDATE: Add LoadingScreen component to maintain consistency

frontend/src/components/Layout/LoadingScreen.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface LoadingScreenProps {
+  children?: React.ReactNode;
+}
+
+const LoadingScreen: React.FC<LoadingScreenProps> = ({
+  children = "Loading...",
+}) => {
+  return (
+    <div className="h-screen w-screen flex items-center justify-center text-white">
+      {children}
+    </div>
+  );
+};
+
+export default LoadingScreen;

frontend/src/components/Navigation/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";

frontend/src/components/Stream/StreamerRoute.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import VideoPage from "../../pages/VideoPage";
+import LoadingScreen from "../Layout/LoadingScreen";
 
 const StreamerRoute: React.FC = () => {
   const { streamerName } = useParams();
@@ -32,13 +33,7 @@ const StreamerRoute: React.FC = () => {
     return () => clearInterval(interval);
   }, [streamerName]);
 
-  if (isLoading) {
-    return (
-      <div className="h-screen w-screen flex text-6xl items-center justify-center">
-        Loading...
-      </div>
-    );
-  }
+  if (isLoading) return <LoadingScreen />;
 
   // streamId=0 is a special case for the streamer's latest stream
   if (isLive) {