Split score board into lazy loaded bundle to avoid having to have mot…

…ion js in the default bundle

balancer/ui/src/App.tsx

@@ -4,17 +4,17 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { IntlProvider } from "react-intl";
 
 import { JoinPage } from "./pages/JoinPage";
-import { ScoreOverviewPage } from "./pages/ScoreOverview";
 import { JoiningPage } from "./pages/JoiningPage";
 import { TeamStatusPage } from "./pages/TeamStatusPage";
-import { IndividualScorePage } from "./pages/IndividualScorePage";
 
 import { Layout } from "./Layout";
 import { Spinner } from "./components/Spinner";
 import { MessageLoader } from "./translations/index";
 import { Toaster } from "react-hot-toast";
 
 const AdminPage = lazy(() => import("./pages/AdminPage"));
+const ScoreOverviewPage = lazy(() => import("./pages/ScoreOverview"));
+const IndividualScorePage = lazy(() => import("./pages/IndividualScorePage"));
 
 interface SimplifiedTeamStatusResponse {
   name: string;

balancer/ui/src/components/PositionDisplay.tsx

@@ -0,0 +1,29 @@
+function FirstPlace({ ...props }) {
+  return <img src="/balancer/icons/first-place.svg" {...props} />;
+}
+
+function SecondPlace({ ...props }) {
+  return <img src="/balancer/icons/second-place.svg" {...props} />;
+}
+
+function ThirdPlace({ ...props }) {
+  return <img src="/balancer/icons/third-place.svg" {...props} />;
+}
+
+export function PositionDisplay({ place }: { place: number }) {
+  switch (place) {
+    case 1:
+      return <FirstPlace className="h-10" />;
+    case 2:
+      return <SecondPlace className="h-10" />;
+    case 3:
+      return <ThirdPlace className="h-10" />;
+    default:
+      return (
+        <>
+          <small>#</small>
+          {place}
+        </>
+      );
+  }
+}

balancer/ui/src/pages/IndividualScorePage.tsx

@@ -42,7 +42,7 @@ async function fetchScore(
   };
 }
 
-export function IndividualScorePage() {
+export default function IndividualScorePage() {
   const { team } = useParams();
   const intl = useIntl();
 

balancer/ui/src/pages/ScoreOverview.tsx

@@ -1,36 +1,7 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { MagicMotion } from "react-magic-motion";
-
-function FirstPlace({ ...props }) {
-  return <img src="/balancer/icons/first-place.svg" {...props} />;
-}
-
-function SecondPlace({ ...props }) {
-  return <img src="/balancer/icons/second-place.svg" {...props} />;
-}
-
-function ThirdPlace({ ...props }) {
-  return <img src="/balancer/icons/third-place.svg" {...props} />;
-}
-
-export function PositionDisplay({ place }: { place: number }) {
-  switch (place) {
-    case 1:
-      return <FirstPlace className="h-10" />;
-    case 2:
-      return <SecondPlace className="h-10" />;
-    case 3:
-      return <ThirdPlace className="h-10" />;
-    default:
-      return (
-        <>
-          <small>#</small>
-          {place}
-        </>
-      );
-  }
-}
+import { PositionDisplay } from "../components/PositionDisplay";
 
 interface Team {
   name: string;
@@ -53,7 +24,7 @@ async function fetchTeams(lastSeen: Date | null): Promise<null | Team[]> {
   return teams;
 }
 
-export function ScoreOverviewPage({
+export default function ScoreOverviewPage({
   activeTeam,
 }: {
   activeTeam: string | null;

balancer/ui/src/pages/TeamStatusPage.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { Card } from "../components/Card";
 import { FormattedMessage, useIntl } from "react-intl";
-import { PositionDisplay } from "./ScoreOverview";
 import { PasscodeDisplayCard } from "../cards/PassCodeDisplayCard";
 import { Button } from "../components/Button";
 import toast from "react-hot-toast";
+import { PositionDisplay } from "../components/PositionDisplay";
 
 interface TeamStatusResponse {
   name: string;