use same Loading progress bar everywhere

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">
+        Loading
-          <progress className="progress is-primary" max="100"></progress>
-        </div>
       ) : (
         <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">
+        Loading
-          <progress className="progress is-primary" max="100"></progress>
-        </div>
       ) : (
         <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">
+          Loading
-            <progress className="progress is-primary" max="100"></progress>
-          </div>
         )}
       </div>
     </section>

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;

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>
   );
 };

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} />);

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>

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 = (
+    content = <section className="section is-medium">{Loading}</section>;
-      <>
-        <Header />
-        <span className="loader" />
-      </>
-    );
   else if (error) {
     content = (
       <section className="section is-medium">

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;