From f4b30da6b34e2445bf263a79f951b039c51c06e5 Mon Sep 17 00:00:00 2001
From: Gold856 <117957790+Gold856@users.noreply.github.com>
Date: Mon, 2 Feb 2026 11:06:48 -0500
Subject: [PATCH] Dynamically import echarts and three.js (#2349)

---
 .../components/app/photon-3d-visualizer.vue   |  8 +++++--
 .../app/photon-calibration-visualizer.vue     |  4 ++--
 .../src/components/settings/DeviceCard.vue    | 24 +++++++++++++++----
 .../src/components/settings/MetricsChart.vue  |  4 ++--
 photon-client/src/lib/ThreeUtils.ts           |  5 ++--
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/photon-client/src/components/app/photon-3d-visualizer.vue b/photon-client/src/components/app/photon-3d-visualizer.vue
index cc954c7f4..10cce9366 100644
--- a/photon-client/src/components/app/photon-3d-visualizer.vue
+++ b/photon-client/src/components/app/photon-3d-visualizer.vue
@@ -44,7 +44,7 @@ let renderer: WebGLRenderer | undefined;
 let controls: TrackballControls | undefined;
 
 let previousTargets: Object3D[] = [];
-const drawTargets = (targets: PhotonTarget[]) => {
+const drawTargets = async (targets: PhotonTarget[]) => {
   // Check here, since if we check in watchEffect this never gets called
   if (!scene || !camera || !renderer || !controls) {
     return;
@@ -89,7 +89,11 @@ const drawTargets = (targets: PhotonTarget[]) => {
 
   if (calibrationCoeffs) {
     // And show camera frustum
-    const calibCamera = createPerspectiveCamera(calibrationCoeffs.resolution, calibrationCoeffs.cameraIntrinsics, 10);
+    const calibCamera = await createPerspectiveCamera(
+      calibrationCoeffs.resolution,
+      calibrationCoeffs.cameraIntrinsics,
+      10
+    );
     const helper = new CameraHelper(calibCamera);
     const helperGroup = new Group();
     helperGroup.add(helper);
diff --git a/photon-client/src/components/app/photon-calibration-visualizer.vue b/photon-client/src/components/app/photon-calibration-visualizer.vue
index e63798c6d..4dad72020 100644
--- a/photon-client/src/components/app/photon-calibration-visualizer.vue
+++ b/photon-client/src/components/app/photon-calibration-visualizer.vue
@@ -65,7 +65,7 @@ const createChessboard = (obs: BoardObservation, cal: CameraCalibrationResult):
 
 let previousTargets: Object3D[] = [];
 let baseAspect: number | undefined;
-const drawCalibration = (cal: CameraCalibrationResult | null) => {
+const drawCalibration = async (cal: CameraCalibrationResult | null) => {
   // Check here, since if we check in watchEffect this never gets called
   if (!cal || !scene || !camera || !renderer || !controls) {
     return;
@@ -95,7 +95,7 @@ const drawCalibration = (cal: CameraCalibrationResult | null) => {
   });
 
   // And show camera frustum
-  const calibCamera = createPerspectiveCamera(props.resolution, cal.cameraIntrinsics);
+  const calibCamera = await createPerspectiveCamera(props.resolution, cal.cameraIntrinsics);
   const helper = new CameraHelper(calibCamera);
 
   // Flip to +Z forward
diff --git a/photon-client/src/components/settings/DeviceCard.vue b/photon-client/src/components/settings/DeviceCard.vue
index 71fdc2f2e..e1bd5c22a 100644
--- a/photon-client/src/components/settings/DeviceCard.vue
+++ b/photon-client/src/components/settings/DeviceCard.vue
@@ -376,21 +376,33 @@ watch(metricsHistorySnapshot, () => {
             <span>CPU Usage</span>
             <span>{{ Math.round(cpuUsageData.at(-1)?.value ?? 0) }}%</span>
           </div>
-          <MetricsChart id="chart" :data="cpuUsageData" type="percentage" :min="0" :max="100" color="blue" />
+          <Suspense>
+            <!-- Allows us to import echarts when it's actually needed  -->
+            <MetricsChart id="chart" :data="cpuUsageData" type="percentage" :min="0" :max="100" color="blue" />
+            <template #fallback> Loading... </template>
+          </Suspense>
         </v-card-text>
         <v-card-text class="pt-0 flex-0-0 pb-2">
           <div class="d-flex justify-space-between pb-3 pt-3">
             <span>CPU Memory Usage</span>
             <span>{{ Math.round(cpuMemoryUsageData.at(-1)?.value ?? 0) }}%</span>
           </div>
-          <MetricsChart id="chart" :data="cpuMemoryUsageData" type="percentage" :min="0" :max="100" color="purple" />
+          <Suspense>
+            <!-- Allows us to import echarts when it's actually needed  -->
+            <MetricsChart id="chart" :data="cpuMemoryUsageData" type="percentage" :min="0" :max="100" color="purple" />
+            <template #fallback> Loading... </template>
+          </Suspense>
         </v-card-text>
         <v-card-text class="pt-0 flex-0-0 pb-2">
           <div class="d-flex justify-space-between pb-3 pt-3">
             <span>CPU Temperature</span>
             <span>{{ cpuTempData.at(-1)?.value == -1 ? "--- " : Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
           </div>
-          <MetricsChart id="chart" :data="cpuTempData" type="temperature" color="red" />
+          <Suspense>
+            <!-- Allows us to import echarts when it's actually needed  -->
+            <MetricsChart id="chart" :data="cpuTempData" type="temperature" color="red" />
+            <template #fallback> Loading... </template>
+          </Suspense>
         </v-card-text>
         <v-card-text class="pt-0 flex-0-0">
           <div class="d-flex justify-space-between pb-3 pt-3">
@@ -404,7 +416,11 @@ watch(metricsHistorySnapshot, () => {
               >{{ networkUsageData.at(-1)?.value == -1 ? "---" : networkUsageData.at(-1)?.value.toFixed(3) }} Mb/s</span
             >
           </div>
-          <MetricsChart id="chart" :data="networkUsageData" type="mb" :min="0" :max="10" color="green" />
+          <Suspense>
+            <!-- Allows us to import echarts when it's actually needed  -->
+            <MetricsChart id="chart" :data="networkUsageData" type="mb" :min="0" :max="10" color="green" />
+            <template #fallback> Loading... </template>
+          </Suspense>
         </v-card-text>
       </v-card>
     </v-col>
diff --git a/photon-client/src/components/settings/MetricsChart.vue b/photon-client/src/components/settings/MetricsChart.vue
index 89e73c2d6..a3c3a00b0 100644
--- a/photon-client/src/components/settings/MetricsChart.vue
+++ b/photon-client/src/components/settings/MetricsChart.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import * as echarts from "echarts";
 import { onMounted, ref, onBeforeUnmount, watch } from "vue";
 import { useTheme } from "vuetify";
 
@@ -198,7 +197,8 @@ const props = defineProps<{
   color?: string;
 }>();
 
-onMounted(() => {
+onMounted(async () => {
+  const echarts = await import("echarts");
   chart = echarts.init(chartRef.value);
   chart.setOption(getOptions(props.data));
 
diff --git a/photon-client/src/lib/ThreeUtils.ts b/photon-client/src/lib/ThreeUtils.ts
index b958c1b4f..2861a2e69 100644
--- a/photon-client/src/lib/ThreeUtils.ts
+++ b/photon-client/src/lib/ThreeUtils.ts
@@ -1,5 +1,5 @@
 import type { JsonMatOfDouble, Resolution } from "@/types/SettingTypes";
-const { PerspectiveCamera } = await import("three");
+const three = import("three");
 
 /**
  * Convert a camera intrinsics matrix and image resolution to a Three.js PerspectiveCamera. This assumes no skew and square pixels (same focal length in x and y), which is a sane assumption for most FRC cameras
@@ -8,11 +8,12 @@ const { PerspectiveCamera } = await import("three");
  * @param intrinsicsCore camera intrinsics from the backend, row-major
  * @returns a Three.js PerspectiveCamera matching the provided intrinsics
  */
-export const createPerspectiveCamera = (
+export const createPerspectiveCamera = async (
   resolution: Resolution,
   intrinsicsCore: JsonMatOfDouble,
   frustumMax: number = 1
 ) => {
+  const { PerspectiveCamera } = await three;
   const imageWidth = resolution.width;
   const imageHeight = resolution.height;
   const focalLengthY = intrinsicsCore.data[4];