From ed58f69275530e6ba01138d262919ed544df5ac9 Mon Sep 17 00:00:00 2001
From: Gold856 <117957790+Gold856@users.noreply.github.com>
Date: Sun, 13 Jul 2025 17:28:45 -0400
Subject: [PATCH] Dynamically import dependencies that are not critical to
 viewing the UI (#2001)

---
 .../src/components/app/photon-3d-visualizer.vue   | 15 +++++++++------
 .../components/cameras/CameraCalibrationCard.vue  | 12 +++++++-----
 .../src/components/dashboard/tabs/Map3DTab.vue    |  7 ++++++-
 .../components/settings/ApriltagControlCard.vue   |  2 +-
 photon-client/src/plugins/vuetify.ts              |  2 +-
 photon-client/src/views/GeneralSettingsView.vue   |  7 ++++++-
 6 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/photon-client/src/components/app/photon-3d-visualizer.vue b/photon-client/src/components/app/photon-3d-visualizer.vue
index caa3070cc..52e98e7a7 100644
--- a/photon-client/src/components/app/photon-3d-visualizer.vue
+++ b/photon-client/src/components/app/photon-3d-visualizer.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import type { PhotonTarget } from "@/types/PhotonTrackingTypes";
+// @ts-expect-error Intellisense says these conflict with the dynamic imports below
+import type { Mesh, Object3D, PerspectiveCamera, Scene, WebGLRenderer } from "three";
+// @ts-expect-error Intellisense says these conflict with the dynamic imports below
+import type { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
 import { onBeforeUnmount, onMounted, watchEffect } from "vue";
-import {
+const {
   ArrowHelper,
   BoxGeometry,
   Color,
   ConeGeometry,
   Mesh,
   MeshNormalMaterial,
-  type Object3D,
   PerspectiveCamera,
   Quaternion,
-  Scene,
   Vector3,
+  Scene,
   WebGLRenderer
-} from "three";
-import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
+} = await import("three");
+const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls");
 
 const props = defineProps<{
   targets: PhotonTarget[];
@@ -114,7 +117,7 @@ const resetCamThirdPerson = () => {
   }
 };
 
-onMounted(() => {
+onMounted(async () => {
   scene = new Scene();
   camera = new PerspectiveCamera(75, 800 / 800, 0.1, 1000);
 
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index abcf8cba3..359fd005e 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -2,8 +2,6 @@
 import { computed, ref } from "vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { CalibrationBoardTypes, CalibrationTagFamilies, type VideoFormat } from "@/types/SettingTypes";
-import JsPDF from "jspdf";
-import { font as PromptRegular } from "@/assets/fonts/PromptRegular";
 import MonoLogo from "@/assets/images/logoMono.png";
 import CharucoImage from "@/assets/images/ChArUco_Marker8x8.png";
 import PvSlider from "@/components/common/pv-slider.vue";
@@ -15,6 +13,8 @@ import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 import { getResolutionString, resolutionsAreEqual } from "@/lib/PhotonUtils";
 import CameraCalibrationInfoCard from "@/components/cameras/CameraCalibrationInfoCard.vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+const PromptRegular = import("@/assets/fonts/PromptRegular");
+const jspdf = import("jspdf");
 
 const settingsValid = ref(true);
 
@@ -88,10 +88,12 @@ const tooManyPoints = computed(
   () => useStateStore().calibrationData.imageCount * patternWidth.value * patternHeight.value > 700000
 );
 
-const downloadCalibBoard = () => {
-  const doc = new JsPDF({ unit: "in", format: "letter" });
+const downloadCalibBoard = async () => {
+  const { jsPDF } = await jspdf;
+  const { font } = await PromptRegular;
+  const doc = new jsPDF({ unit: "in", format: "letter" });
 
-  doc.addFileToVFS("Prompt-Regular.tff", PromptRegular);
+  doc.addFileToVFS("Prompt-Regular.tff", font);
   doc.addFont("Prompt-Regular.tff", "Prompt-Regular", "normal");
   doc.setFont("Prompt-Regular");
   doc.setFontSize(12);
diff --git a/photon-client/src/components/dashboard/tabs/Map3DTab.vue b/photon-client/src/components/dashboard/tabs/Map3DTab.vue
index 10a744e5d..699a36a59 100644
--- a/photon-client/src/components/dashboard/tabs/Map3DTab.vue
+++ b/photon-client/src/components/dashboard/tabs/Map3DTab.vue
@@ -16,7 +16,12 @@ const trackedTargets = computed<PhotonTarget[]>(() => useStateStore().currentPip
     </v-row>
     <v-row style="width: 100%">
       <v-col style="display: flex; align-items: center; justify-content: center">
-        <photon3d-visualizer :targets="trackedTargets" />
+        <Suspense>
+          <!-- Allows us to import three js when it's actually needed  -->
+          <photon3d-visualizer :targets="trackedTargets" />
+
+          <template #fallback> Loading... </template>
+        </Suspense>
       </v-col>
     </v-row>
   </div>
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue
index 418d22da9..e9f2d8d9c 100644
--- a/photon-client/src/components/settings/ApriltagControlCard.vue
+++ b/photon-client/src/components/settings/ApriltagControlCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import { Euler, Quaternion as ThreeQuat } from "three";
 import type { Quaternion } from "@/types/PhotonTrackingTypes";
 import { toDeg } from "@/lib/MathUtils";
+const { Euler, Quaternion: ThreeQuat } = await import("three");
 
 const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: number } => {
   const quat = new ThreeQuat(rot_quat.X, rot_quat.Y, rot_quat.Z, rot_quat.W);
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 94fa9c683..74acfd838 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -1,5 +1,5 @@
 import "vuetify/styles";
-import "@mdi/font/css/materialdesignicons.css";
+import("@mdi/font/css/materialdesignicons.css");
 import type { ThemeDefinition } from "vuetify/lib/composables/theme";
 import { createVuetify } from "vuetify";
 
diff --git a/photon-client/src/views/GeneralSettingsView.vue b/photon-client/src/views/GeneralSettingsView.vue
index 0a59671df..09a2ae08c 100644
--- a/photon-client/src/views/GeneralSettingsView.vue
+++ b/photon-client/src/views/GeneralSettingsView.vue
@@ -15,6 +15,11 @@ import ApriltagControlCard from "@/components/settings/ApriltagControlCard.vue";
     <NetworkingCard />
     <ObjectDetectionCard v-if="useSettingsStore().general.supportedBackends.length > 0" />
     <LightingControlCard v-if="useSettingsStore().lighting.supported" />
-    <ApriltagControlCard />
+    <Suspense>
+      <!-- Allows us to import three js when it's actually needed  -->
+      <ApriltagControlCard />
+
+      <template #fallback> Loading... </template>
+    </Suspense>
   </div>
 </template>