Convert all major views to separate chunks.

src/card.ts

@@ -24,18 +24,13 @@ import {
 } from './card-condition.js';
 import './components/elements.js';
 import { FrigateCardElements } from './components/elements.js';
-import './components/gallery.js';
-import './components/image.js';
-import { FrigateCardImage } from './components/image.js';
-import './components/live/live.js';
+import type { FrigateCardImage } from './components/image.js';
 import type { FrigateCardLive } from './components/live/live.js';
 import './components/menu.js';
 import { FrigateCardMenu, FRIGATE_BUTTON_MENU_ICON } from './components/menu.js';
 import './components/message.js';
 import { renderMessage, renderProgressIndicator } from './components/message.js';
 import './components/thumbnail-carousel.js';
-import './components/timeline.js';
-import './components/viewer.js';
 import { isConfigUpgradeable } from './config-mgmt.js';
 import {
   CAMERA_BIRDSEYE,
@@ -43,9 +38,6 @@ import {
   REPO_URL,
 } from './const.js';
 import { getLanguage, localize } from './localize/localize.js';
-import './patches/ha-camera-stream.js';
-import './patches/ha-hls-player.js';
-import './patches/ha-web-rtc-player.ts';
 import cardStyle from './scss/card.scss';
 import {
   Actions,
@@ -1125,6 +1117,18 @@ export class FrigateCard extends LitElement {
     if (changedProps.has('_cardWideConfig')) {
       setPerformanceCSSStyles(this, this._cardWideConfig?.performance);
     }
+
+    if (this._view?.is('live')) {
+      import('./components/live/live.js');
+    } else if (this._view?.isGalleryView()) {
+      import('./components/gallery.js');
+    } else if (this._view?.isViewerView()) {
+      import('./components/viewer.js');
+    } else if (this._view?.is('image')) {
+      import('./components/image.js');
+    } else if (this._view?.is('timeline')) {
+      import('./components/timeline.js');
+    }
   }
 
   /**

src/components/live/live-ha.ts

@@ -8,6 +8,9 @@ import { CameraConfig, FrigateCardMediaPlayer } from '../../types.js';
 import { getCameraTitle } from '../../utils/camera.js';
 import { dispatchErrorMessageEvent, dispatchMessageEvent } from '../message.js';
 import '../../patches/ha-camera-stream';
+import '../../patches/ha-hls-player.js';
+import '../../patches/ha-web-rtc-player.ts';
+
 
 @customElement('frigate-card-live-ha')
 export class FrigateCardLiveHA extends LitElement {

src/components/live/live.ts

@@ -49,10 +49,8 @@ import {
 import '../next-prev-control.js';
 import '../title-control.js';
 import '../surround.js';
-import '../../patches/ha-camera-stream';
 import { EmblaCarouselPlugins } from '../carousel.js';
 import { classMap } from 'lit/directives/class-map.js';
-import '../image';
 import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
 import { DataManager } from '../../utils/data-manager.js';
 
@@ -760,6 +758,9 @@ export class FrigateCardLiveProvider extends LitElement {
     }
     if (changedProps.has('liveConfig')) {
       updateElementStyleFromMediaLayoutConfig(this, this.liveConfig?.layout);
+      if (this.liveConfig?.show_image_during_load) {
+        import('../image.js');
+      }
     }
     if (changedProps.has('cameraConfig')) {
       if (this._getResolvedProvider() === 'frigate-jsmpeg') {

src/components/surround.ts

@@ -122,7 +122,7 @@ export class FrigateCardSurround extends LitElement {
    */
   protected willUpdate(changedProperties: PropertyValues): void {
     if (this.timelineConfig?.mode && this.timelineConfig.mode !== 'none') {
-      import('./timeline-core.js');
+      import('./timeline.js');
     }
 
     // Once the component will certainly update, dispatch a media request. Only

src/components/thumbnail.ts

@@ -17,7 +17,7 @@ import { getEventDurationString } from '../utils/frigate.js';
 import { renderTask } from '../utils/task.js';
 import { createFetchThumbnailTask } from '../utils/thumbnail.js';
 import { View } from '../view.js';
-import { MediaSeek } from './viewer.js';
+import type { MediaSeek } from './viewer.js';
 import { TaskStatus } from '@lit-labs/task';
 
 import type {

src/components/timeline.ts

@@ -5,6 +5,7 @@ import { CameraConfig, ExtendedHomeAssistant, TimelineConfig } from '../types';
 import { DataManager } from '../utils/data-manager';
 import { View } from '../view';
 import './surround.js';
+import './timeline-core.js';
 
 // This file is kept separate from timeline-core.ts to avoid a circular dependency:
 //   FrigateCardTimeline ->
@@ -28,13 +29,6 @@ export class FrigateCardTimeline extends LitElement {
   @property({ attribute: false })
   public dataManager?: DataManager;
 
-  /**
-   * Called on first update.
-   */
-  protected firstUpdated(): void {
-    import('./timeline-core.js');    
-  }
-
   /**
    * Master render method.
    * @returns A rendered template.