prefetch all place icons

this should make should that the icon is already there if you move up / down a position on you status page and also reduce possibilities for jank on the score overview
juice-shop · Nov 27, 2024 · 643cab7 · 643cab7
1 parent 53605fa
commit 643cab7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/balancer/ui/src/pages/ScoreOverview.tsx b/balancer/ui/src/pages/ScoreOverview.tsx
@@ -98,6 +98,9 @@ export function ScoreOverviewPage({
 
   return (
     <>
+      <link rel="preload" href="/balancer/icons/first-place.svg" as="image" />
+      <link rel="preload" href="/balancer/icons/second-place.svg" as="image" />
+      <link rel="preload" href="/balancer/icons/third-place.svg" as="image" />
       <div className="p-0 overflow-hidden w-full max-w-2xl rounded-lg bg-gradient-to-b from-gray-700 via-gray-700 to-gray-200 dark:from-gray-100 dark:via-gray-100 dark:to-gray-500 shadow">
         <h1 className="px-4 pt-4 font-bold tracking-wide text-gray-100 dark:text-gray-800 ">
           ScoreBoard

diff --git a/balancer/ui/src/pages/TeamStatusPage.tsx b/balancer/ui/src/pages/TeamStatusPage.tsx
@@ -155,49 +155,55 @@ export const TeamStatusPage = ({
   }
 
   return (
-    <Card className="w-full max-w-2xl">
-      <div className="grid grid-cols-2 items-center">
-        <div className="flex flex-row items-center p-4">
-          <img
-            src="/balancer/icons/astronaut.svg"
-            alt="Astronaut"
-            className="h-12 w-12 shrink-0 mr-3"
-          />
+    <>
+      <link rel="preload" href="/balancer/icons/first-place.svg" as="image" />
+      <link rel="preload" href="/balancer/icons/second-place.svg" as="image" />
+      <link rel="preload" href="/balancer/icons/third-place.svg" as="image" />
+
+      <Card className="w-full max-w-2xl">
+        <div className="grid grid-cols-2 items-center">
+          <div className="flex flex-row items-center p-4">
+            <img
+              src="/balancer/icons/astronaut.svg"
+              alt="Astronaut"
+              className="h-12 w-12 shrink-0 mr-3"
+            />
 
-          <div className="text-sm font-light">
-            <p>
-              <FormattedMessage
-                id="logged_in_as"
-                defaultMessage="Logged in as"
-              />
-            </p>
-            <p>
-              <strong className="font-medium">{team}</strong>
-            </p>
+            <div className="text-sm font-light">
+              <p>
+                <FormattedMessage
+                  id="logged_in_as"
+                  defaultMessage="Logged in as"
+                />
+              </p>
+              <p>
+                <strong className="font-medium">{team}</strong>
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-row-reverse items-center p-4 gap-3">
+            <LogoutButton setActiveTeam={setActiveTeam} />
+            <PasscodeResetButton team={team} />
           </div>
         </div>
-        <div className="flex flex-row-reverse items-center p-4 gap-3">
-          <LogoutButton setActiveTeam={setActiveTeam} />
-          <PasscodeResetButton team={team} />
-        </div>
-      </div>
 
-      <hr className="border-gray-500" />
+        <hr className="border-gray-500" />
 
-      <ScoreDisplay instanceStatus={instanceStatus} />
-      <hr className="border-gray-500" />
+        <ScoreDisplay instanceStatus={instanceStatus} />
+        <hr className="border-gray-500" />
 
-      {passcode && (
-        <>
-          <div className="flex flex-col justify-start p-4">
-            <PasscodeDisplayCard passcode={passcode} />
-          </div>
-          <hr className="border-gray-500" />
-        </>
-      )}
+        {passcode && (
+          <>
+            <div className="flex flex-col justify-start p-4">
+              <PasscodeDisplayCard passcode={passcode} />
+            </div>
+            <hr className="border-gray-500" />
+          </>
+        )}
 
-      <StatusDisplay instanceStatus={instanceStatus} />
-    </Card>
+        <StatusDisplay instanceStatus={instanceStatus} />
+      </Card>
+    </>
   );
 };