diff --git a/src/views/WidgetsView.vue b/src/views/WidgetsView.vue
index 796140874..7824bb7fe 100644
--- a/src/views/WidgetsView.vue
+++ b/src/views/WidgetsView.vue
@@ -9,41 +9,7 @@
           :allow-moving="widget.managerVars.allowMoving"
           :allow-resizing="store.editingMode"
         >
-          <template v-if="widget.component === WidgetType.Attitude">
-            <Attitude :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.Compass">
-            <Compass :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.DepthHUD">
-            <DepthHUD :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.CompassHUD">
-            <CompassHUD :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.IFrame">
-            <IFrame :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.ImageViewer">
-            <ImageView :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.Map">
-            <Map :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.MiniWidgetsBar">
-            <MiniWidgetsBar :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.URLVideoPlayer">
-            <URLVideoPlayer :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.VideoPlayer">
-            <VideoPlayer :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.VirtualHorizon">
-            <VirtualHorizon :widget="widget" />
-          </template>
-          <!-- TODO: Use the line below instead of the 12 lines above -->
-          <!-- <component :is="componentFromType(widget.component)"></component> -->
+          <component :is="componentFromType(widget.component)" :widget="widget" />
         </WidgetHugger>
       </template>
       <div class="w-full h-full bg-slate-500" />
@@ -52,36 +18,25 @@
 </template>
 
 <script setup lang="ts">
-// import { type AsyncComponentLoader, defineAsyncComponent } from 'vue'
+import { type AsyncComponentLoader, defineAsyncComponent } from 'vue'
 
-import ImageView from '@/components/widgets/ImageView.vue'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { WidgetType } from '@/types/widgets'
 
 import SnappingGrid from '../components/SnappingGrid.vue'
 import WidgetHugger from '../components/WidgetHugger.vue'
-import Attitude from '../components/widgets/Attitude.vue'
-import Compass from '../components/widgets/Compass.vue'
-import CompassHUD from '../components/widgets/CompassHUD.vue'
-import DepthHUD from '../components/widgets/DepthHUD.vue'
-import IFrame from '../components/widgets/IFrame.vue'
-import Map from '../components/widgets/Map.vue'
-import MiniWidgetsBar from '../components/widgets/MiniWidgetsBar.vue'
-import URLVideoPlayer from '../components/widgets/URLVideoPlayer.vue'
-import VideoPlayer from '../components/widgets/VideoPlayer.vue'
-import VirtualHorizon from '../components/widgets/VirtualHorizon.vue'
 
 const store = useWidgetManagerStore()
 
-// TODO: Make this work
-// This function allows us to load any component without declaring it in the template, just
-// adding it to the WidgetType enum, but it's currently buggy as it re-mounts the component
-// anytime a HTML property of it is changes (when someone hovers the element, for example).
-// const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
-//   return defineAsyncComponent(
-//     () => import(`../components/widgets/${componentType}.vue`)
-//   )
-// }
+const componentCache: Record<string, AsyncComponentLoader> = {}
+
+const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
+  if (componentCache[componentType] === undefined) {
+    componentCache[componentType] = defineAsyncComponent(() => import(`../components/widgets/${componentType}.vue`))
+  }
+
+  return componentCache[componentType]
+}
 </script>
 
 <style scoped>