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">
-          <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>