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)}>
-            <span class="dotdotdot"></span>
-          </ha-card>`
+        ? html`${renderProgressIndicator({
+            cardWideConfig: this.cardWideConfig,
+            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}