From c0e249c5e4b4537b90c18353fba4a199e4eec90a Mon Sep 17 00:00:00 2001
From: Jannik Hollenbach <jannik@hollenbach.de>
Date: Thu, 28 Nov 2024 21:52:21 +0100
Subject: [PATCH] Split score board into lazy loaded bundle to avoid having to
 have motion js in the default bundle

---
 balancer/ui/src/App.tsx                       |  4 +--
 .../ui/src/components/PositionDisplay.tsx     | 29 ++++++++++++++++
 balancer/ui/src/pages/IndividualScorePage.tsx |  2 +-
 balancer/ui/src/pages/ScoreOverview.tsx       | 33 ++-----------------
 balancer/ui/src/pages/TeamStatusPage.tsx      |  2 +-
 5 files changed, 35 insertions(+), 35 deletions(-)
 create mode 100644 balancer/ui/src/components/PositionDisplay.tsx

diff --git a/balancer/ui/src/App.tsx b/balancer/ui/src/App.tsx
index 68de0e99b..82bc8da6d 100644
--- a/balancer/ui/src/App.tsx
+++ b/balancer/ui/src/App.tsx
@@ -4,10 +4,8 @@ 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";
@@ -15,6 +13,8 @@ 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;
diff --git a/balancer/ui/src/components/PositionDisplay.tsx b/balancer/ui/src/components/PositionDisplay.tsx
new file mode 100644
index 000000000..f9b89f605
--- /dev/null
+++ b/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}
+        </>
+      );
+  }
+}
diff --git a/balancer/ui/src/pages/IndividualScorePage.tsx b/balancer/ui/src/pages/IndividualScorePage.tsx
index 2d29f48b7..f336a25b2 100644
--- a/balancer/ui/src/pages/IndividualScorePage.tsx
+++ b/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();
 
diff --git a/balancer/ui/src/pages/ScoreOverview.tsx b/balancer/ui/src/pages/ScoreOverview.tsx
index 847dce002..384634966 100644
--- a/balancer/ui/src/pages/ScoreOverview.tsx
+++ b/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;
diff --git a/balancer/ui/src/pages/TeamStatusPage.tsx b/balancer/ui/src/pages/TeamStatusPage.tsx
index ea1d7de09..394292589 100644
--- a/balancer/ui/src/pages/TeamStatusPage.tsx
+++ b/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;