Add support for 'scroll up refresh' in the gallery.

src/components/message.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { ClassInfo, 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';
@@ -29,7 +29,7 @@ export class FrigateCardMessage extends LitElement {
       dotdotdot: !!this.dotdotdot,
     };
     return html` <div class="wrapper">
-      <div class="message">
+      <div class="message padded">
         <div class="icon">
           <ha-icon icon="${icon}"> </ha-icon>
         </div>
@@ -78,6 +78,8 @@ export class FrigateCardErrorMessage extends LitElement {
   }
 }
 
+type FrigateCardProgressIndicatorSize = 'tiny' | 'small' | 'medium' | 'large';
+
 @customElement('frigate-card-progress-indicator')
 export class FrigateCardProgressIndicator extends LitElement {
   @property({ attribute: false })
@@ -86,10 +88,14 @@ export class FrigateCardProgressIndicator extends LitElement {
   @property({ attribute: false })
   public animated = false;
 
+  @property({ attribute: false })
+  public size: FrigateCardProgressIndicatorSize = 'large';
+
   protected render(): TemplateResult {
     return html` <div class="message vertical">
       ${this.animated
-        ? html`<ha-circular-progress active="true" size="large"> </ha-circular-progress>`
+        ? html`<ha-circular-progress active="true" size="${this.size}">
+          </ha-circular-progress>`
         : html`<ha-icon icon="mdi:timer-sand"></ha-icon>`}
       ${this.message ? html`<span>${this.message}</span>` : html``}
     </div>`;
@@ -119,10 +125,14 @@ export function renderMessage(message: Message): TemplateResult {
 export function renderProgressIndicator(options?: {
   message?: string;
   cardWideConfig?: CardWideConfig;
-  componentRef?: Ref<HTMLElement>,
+  componentRef?: Ref<HTMLElement>;
+  classes?: ClassInfo;
+  size?: FrigateCardProgressIndicatorSize;
 }): TemplateResult {
   return html`
     <frigate-card-progress-indicator
+      class="${classMap(options?.classes ?? {})}"
+      .size=${options?.size}
       ${options?.componentRef ? ref(options.componentRef) : ''}
       .message=${options?.message || ''}
       .animated=${options?.cardWideConfig?.performance?.features