From ed460f63d629f9040d2c7752a9baa503d4310534 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Sat, 3 Jan 2026 09:23:10 +0100
Subject: [PATCH] use same `Loading` progress bar everywhere

---
 frontend/src/Form.tsx      | 13 ++++---------
 frontend/src/Loading.tsx   |  6 ++++++
 frontend/src/Login.tsx     |  3 ++-
 frontend/src/MVPChart.tsx  |  3 ++-
 frontend/src/Network.tsx   |  1 +
 frontend/src/Session.tsx   |  8 ++------
 frontend/src/TeamPanel.tsx |  5 +++--
 7 files changed, 20 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/Loading.tsx

diff --git a/frontend/src/Form.tsx b/frontend/src/Form.tsx
index 5f3c379..4e4f0bd 100644
--- a/frontend/src/Form.tsx
+++ b/frontend/src/Form.tsx
@@ -4,6 +4,7 @@ import { apiAuth, User } from "./api";
 import { TeamState, useSession } from "./Session";
 import TabController from "./TabController";
 import { Chemistry, MVPRanking, PlayerType } from "./types";
+import Loading from "./Loading";
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
@@ -300,9 +301,7 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
-        <div className="container">
-          <progress className="progress is-primary" max="100"></progress>
-        </div>
+        Loading
       ) : (
         <div className="columns container is-mobile is-1-mobile">
           <div className="column">
@@ -422,9 +421,7 @@ function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
-        <div className="container">
-          <progress className="progress is-primary" max="100"></progress>
-        </div>
+        Loading
       ) : (
         <div className="columns container is-multiline is-mobile is-1-mobile">
           <div className="column is-full is-flex is-justify-content-center">
@@ -526,9 +523,7 @@ export default function Rankings() {
             <TypeDnD {...{ user, teams, players }} />
           </TabController>
         ) : (
-          <div className="container">
-            <progress className="progress is-primary" max="100"></progress>
-          </div>
+          Loading
         )}
       </div>
     </section>
diff --git a/frontend/src/Loading.tsx b/frontend/src/Loading.tsx
new file mode 100644
index 0000000..8baec17
--- /dev/null
+++ b/frontend/src/Loading.tsx
@@ -0,0 +1,6 @@
+const Loading = (
+  <div className="container">
+    <progress className="progress is-primary" max="100"></progress>
+  </div>
+);
+export default Loading;
diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index e466d41..d00c449 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -3,6 +3,7 @@ import { baseUrl, currentUser, login, User } from "./api";
 import Header from "./Header";
 import { useLocation, useNavigate } from "react-router";
 import { Eye, EyeSlash } from "./Icons";
+import Loading from "./Loading";
 
 export interface LoginProps {
   onLogin: (user: User) => void;
@@ -101,7 +102,7 @@ export const Login = ({ onLogin }: LoginProps) => {
           login
         </button>
       </div>
-      {loading && <span className="loader" />}
+      {loading && Loading}
     </form>
   );
 };
diff --git a/frontend/src/MVPChart.tsx b/frontend/src/MVPChart.tsx
index 5257f8a..adb98d1 100644
--- a/frontend/src/MVPChart.tsx
+++ b/frontend/src/MVPChart.tsx
@@ -4,6 +4,7 @@ import { PlayerRanking } from "./types";
 import RaceChart from "./RaceChart";
 import { useSession } from "./Session";
 import { useNavigate } from "react-router";
+import Loading from "./Loading";
 
 const MVPChart = () => {
   let initialData = {} as PlayerRanking[][];
@@ -54,7 +55,7 @@ const MVPChart = () => {
     loadData();
   }, [teams]);
 
-  if (loading) return <span className="loader" />;
+  if (loading) return Loading;
   else if (error) return <span>{error}</span>;
   else
     return data.map((_data) => <RaceChart std={showStd} playerRanks={_data} />);
diff --git a/frontend/src/Network.tsx b/frontend/src/Network.tsx
index b5fe501..54c9d36 100644
--- a/frontend/src/Network.tsx
+++ b/frontend/src/Network.tsx
@@ -356,6 +356,7 @@ export const GraphComponent = () => {
                 <br />
                 <i>Ctrl</i> or <i>Shift</i>
               </p>
+              <br />
               <p>drag to pan/rotate</p>
               <hr className="has-background-info" />
               <p>popularity is meassured by rank-weighted in-degree</p>
diff --git a/frontend/src/Session.tsx b/frontend/src/Session.tsx
index b002b17..f210060 100644
--- a/frontend/src/Session.tsx
+++ b/frontend/src/Session.tsx
@@ -9,6 +9,7 @@ import { apiAuth, currentUser, loadPlayers, logout, User } from "./api";
 import { Login } from "./Login";
 import Header from "./Header";
 import { Team } from "./types";
+import Loading from "./Loading";
 
 export interface SessionProviderProps {
   children: ReactNode;
@@ -98,12 +99,7 @@ export function SessionProvider(props: SessionProviderProps) {
 
   let content: ReactNode;
   if (loading || (!error && !user))
-    content = (
-      <>
-        <Header />
-        <span className="loader" />
-      </>
-    );
+    content = <section className="section is-medium">{Loading}</section>;
   else if (error) {
     content = (
       <section className="section is-medium">
diff --git a/frontend/src/TeamPanel.tsx b/frontend/src/TeamPanel.tsx
index 72c0021..bcbba0a 100644
--- a/frontend/src/TeamPanel.tsx
+++ b/frontend/src/TeamPanel.tsx
@@ -4,6 +4,7 @@ import { useSession } from "./Session";
 import { ErrorState } from "./types";
 import { useNavigate } from "react-router";
 import Calendar from "./Calendar";
+import Loading from "./Loading";
 
 const TeamPanel = () => {
   const { user, teams, players, reloadPlayers } = useSession();
@@ -110,7 +111,7 @@ const TeamPanel = () => {
                     </button>
                   </div>
                 ) : (
-                  <span className="loader" />
+                  Loading
                 )}
               </div>
 
@@ -250,6 +251,6 @@ const TeamPanel = () => {
         </section>
       </>
     );
-  } else <span className="loader" />;
+  } else Loading;
 };
 export default TeamPanel;