Use standard spinner for gallery loading.

src/components/gallery.ts

@@ -27,13 +27,13 @@ import { View } from '../view/view.js';
 import { renderProgressIndicator } from './message.js';
 import './thumbnail.js';
 import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
-import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { createRef, Ref } from 'lit/directives/ref.js';
 import { MediaQueriesClassifier } from '../view/media-queries-classifier';
 import { EventMediaQueries, RecordingMediaQueries } from '../view/media-queries';
 import { EventQuery, MediaQuery, RecordingQuery } from '../camera/types';
 import { MediaQueriesResults } from '../view/media-queries-results';
 import { errorToConsole } from '../utils/basic';
-import "./media-filter";
+import './media-filter';
 
 const GALLERY_MEDIA_CHUNK_SIZE = 100;
 
@@ -105,10 +105,10 @@ export class FrigateCardGallery extends LitElement {
     return html`
       <frigate-card-surround-basic
         .drawerIcons=${{
-          'right': {
+          right: {
             closed: 'mdi:filter-cog-outline',
-            open: 'mdi:filter-cog'
+            open: 'mdi:filter-cog',
-          }
+          },
         }}
       >
         <frigate-card-media-filter
@@ -126,6 +126,7 @@ export class FrigateCardGallery extends LitElement {
           .galleryConfig=${this.galleryConfig}
           .cameras=${this.cameras}
           .cameraManager=${this.cameraManager}
+          .cardWideConfig=${this.cardWideConfig}
         >
         </frigate-card-gallery-core>
       </frigate-card-surround-basic>
@@ -163,6 +164,9 @@ export class FrigateCardGalleryCore extends LitElement {
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   protected _intersectionObserver: IntersectionObserver;
   protected _resizeObserver: ResizeObserver;
   protected _refLoader: Ref<HTMLElement> = createRef();
@@ -345,9 +349,10 @@ export class FrigateCardGalleryCore extends LitElement {
           </frigate-card-thumbnail>`,
       )}
       ${this._showExtensionLoader
-        ? html` <ha-card ${ref(this._refLoader)}>
+        ? html`${renderProgressIndicator({
-            <span class="dotdotdot"></span>
+            cardWideConfig: this.cardWideConfig,
-          </ha-card>`
+            componentRef: this._refLoader,
+          })}`
         : ''}
     `;
   }

src/components/message.ts

@@ -1,6 +1,7 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ref, Ref } from 'lit/directives/ref.js';
 import { TROUBLESHOOTING_URL } from '../const.js';
 import { localize } from '../localize/localize.js';
 import messageStyle from '../scss/message.scss';
@@ -118,9 +119,11 @@ export function renderMessage(message: Message): TemplateResult {
 export function renderProgressIndicator(options?: {
   message?: string;
   cardWideConfig?: CardWideConfig;
+  componentRef?: Ref<HTMLElement>,
 }): TemplateResult {
   return html`
     <frigate-card-progress-indicator
+      ${options?.componentRef ? ref(options.componentRef) : ''}
       .message=${options?.message || ''}
       .animated=${options?.cardWideConfig?.performance?.features
         .animated_progress_indicator ?? true}

src/scss/gallery.scss

@@ -1,5 +1,3 @@
-@use 'dotdotdot.scss';
-
 :host {
   width: 100%;
   height: auto;
@@ -25,41 +23,6 @@
   display: none;
 }
 
-:host ha-card {
-  min-width: 100%;
-  aspect-ratio: 1/1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  text-align: center;
-  color: var(--primary-text-color, white);
-  border: 1px solid var(--primary-color);
-  border-radius: var(
-    --frigate-card-css-border-radius,
-    var(--ha-card-border-radius, 4px)
-  );
-
-  // Folder background color should match the thumbnail element background
-  // color.
-  background-color: var(--primary-background-color, black);
-  padding: 10px;
-  line-height: 1;
-  overflow: hidden;
-
-  // Some themes override these values (with high CSS specificity) which is
-  // intended for full cards rather than internal ones. Since we use multiple of
-  // these for folders, we cannot use an ID and need to resort to !important.
-  margin: 0px !important;
-  box-shadow: none !important;
-
-  transition: transform 0.2s linear;
-}
-ha-card:hover {
-  transform: scale(1.04);
-}
-
-ha-card,
 frigate-card-thumbnail {
   height: 100%;
   max-height: var(--frigate-card-thumbnail-size);
@@ -67,3 +30,7 @@ frigate-card-thumbnail {
 frigate-card-thumbnail:not([details]) {
   width: 100%;
 }
+frigate-card-progress-indicator {
+  // Progress indicator spans the grid.
+  grid-column: 1 / -1;
+}

src/view/view.ts

@@ -6,7 +6,6 @@
 //  - TODO: Debug statement in card wide config.
 
 // Gallery:
-//  - TODO: Use spinner for gallery loading / cardwideconfig not dotdotdot
 //  - TODO: Handle all TODOs in media filter and media filter core.
 //  - TODO: Make media filter slot choice configurable (gallery.ts).
 //  - TODO: Filter panel expands from right can occasionally 'stick' open.