Changeset dc30259 for frontend/src

Timestamp:

02/07/26 15:34:33 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

8a47b30

Parents:

ebdd3d4

Message:

add loading spinner; don't show sidebar for unauthenticated users

Location:

frontend/src

Files:

• App.tsx (modified) (3 diffs)
• components/LoadingSpinner.tsx (added)
• pages/AllUsers.tsx (modified) (2 diffs)
• pages/MusicalCollection.tsx (modified) (2 diffs)
• pages/Nav.tsx (modified) (1 diff)
• pages/UserDetail.tsx (modified) (2 diffs)

frontend/src/App.tsx

@@ -1 @@
-import { useState } from "react";
-import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { useEffect, useState } from "react";
+import {
+        createBrowserRouter,
+        Outlet,
+        RouterProvider,
+        useLocation,
+} from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import LoadingSpinner from "./components/LoadingSpinner";
 import Sidebar from "./components/Sidebar";
 import { useAuth } from "./context/authContext";
@@ -15 +21 @@
 const MainLayout = () => {
         const { user } = useAuth();
-        const [isSidebarOpen, setIsSidebarOpen] = useState(!!user);
+        const location = useLocation();
+        // show sidebar only if user is logged in and is on the landing page
+        const isLandingPage = location.pathname === "/";
+        const [isSidebarOpen, setIsSidebarOpen] = useState(!!user && isLandingPage);
+
+        // Open sidebar when user logs in and navigates to landing page
+        useEffect(() => {
+                if (user && isLandingPage) {
+                        setIsSidebarOpen(true);
+                }
+        }, [user, isLandingPage]);
 
         return (
@@ -51 +67 @@
 
         if (isAuthLoading) {
-                return (
-                        <div className="flex h-screen items-center justify-center bg-[#121212]">
-                                <div className="w-12 h-12 border-4 border-white/10 border-t-[#1db954] rounded-full animate-spin"></div>
-                        </div>
-                );
+                return <LoadingSpinner />;
         }
 

frontend/src/pages/AllUsers.tsx

@@ -2 +2 @@
 import { useNavigate } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
+import LoadingSpinner from "../components/LoadingSpinner";
 
 interface User {
@@ -39 +40 @@
         };
 
-        if (users.length == 0) return <div className="p-6">Loading...</div>;
+        if (users.length == 0) {
+                return <LoadingSpinner />;
+        }
         if (error) {
                 return (

frontend/src/pages/MusicalCollection.tsx

@@ -2 +2 @@
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
+import LoadingSpinner from "../components/LoadingSpinner";
 import type { Song, Album, Playlist } from "../utils/types";
 import { handleError } from "../utils/error";
@@ -71 +72 @@
 
   if (isLoading) {
-    return <div className="p-6">Loading...</div>;
+    return <LoadingSpinner />;
   }
 

frontend/src/pages/Nav.tsx

@@ -52 +52 @@
                 >
                         <div className="flex items-center gap-4">
-                                {onToggleSidebar && (
+                                {onToggleSidebar && user && (
                                         <button
                                                 onClick={onToggleSidebar}

frontend/src/pages/UserDetail.tsx

@@ -2 +2 @@
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
+import LoadingSpinner from "../components/LoadingSpinner";
 import ArtistView from "../components/userProfile/ArtistView";
 import ListenerView from "../components/userProfile/ListenerView";
@@ -174 +175 @@
         }
 
-        if (!user) return <div className="p-6">Loading...</div>;
+        if (!user) {
+                return <LoadingSpinner />;
+        }
 
         return (