Memoize Fluent chart token resolution

frontend/src/components/TopCountriesBarChart.tsx

@@ -3,6 +3,7 @@
  * by ban count, sorted descending.
  */
 
+import { useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -144,6 +145,15 @@ export function TopCountriesBarChart({
 
   const entries = buildEntries(countries, countryNames);
 
+  const { primaryColour, axisColour, gridColour } = useMemo(
+    () => ({
+      primaryColour: resolveFluentToken(CHART_PALETTE[0] ?? ""),
+      axisColour: resolveFluentToken(CHART_AXIS_TEXT_TOKEN),
+      gridColour: resolveFluentToken(CHART_GRID_LINE_TOKEN),
+    }),
+    [],
+  );
+
   if (entries.length === 0) {
     return (
       <div className={styles.emptyWrapper}>
@@ -154,10 +164,6 @@ export function TopCountriesBarChart({
 
   const chartHeight = Math.max(entries.length * BAR_HEIGHT_PX, MIN_CHART_HEIGHT);
 
-  const primaryColour = resolveFluentToken(CHART_PALETTE[0] ?? "");
-  const axisColour = resolveFluentToken(CHART_AXIS_TEXT_TOKEN);
-  const gridColour = resolveFluentToken(CHART_GRID_LINE_TOKEN);
-
   return (
     <div className={styles.wrapper} style={{ height: chartHeight }}>
       <ResponsiveContainer width="100%" height="100%">