perf: Change media fetches to be asynchronous to view render (#1702)

This is a fairly non-trivial change in terms of consequence, so a greater than average chance something breaks. This is necessary since some cameras (e.g. Reolink) are materially slower to fetch media, and this change substantially improves card responsiveness.

src/components/gallery.ts

@@ -401,10 +401,14 @@ export class FrigateCardGalleryCore extends LitElement {
       // handle (as typical), but rather directly rendering the message into the
       // gallery. This is to allow the filter to still be available when a given
       // filter selection returns no media.
+      const loadingMedia = !!view?.context?.loading?.query;
       return renderMessage({
         type: 'info',
-        message: localize('common.no_media'),
+        message: loadingMedia
+          ? localize('error.awaiting_media')
+          : localize('common.no_media'),
         icon: 'mdi:multimedia',
+        dotdotdot: loadingMedia,
       });
     }
 

src/components/viewer/index.ts

@@ -56,10 +56,15 @@ export class FrigateCardViewer extends LitElement {
       // Directly render an error message (instead of dispatching it upwards)
       // to preserve the mini-timeline if the user pans into an area with no
       // media.
+      const loadingMedia =
+        !!this.viewManagerEpoch.manager.getView()?.context?.loading?.query;
       return renderMessage({
         type: 'info',
-        message: localize('common.no_media'),
+        message: loadingMedia
+          ? localize('error.awaiting_media')
+          : localize('common.no_media'),
         icon: 'mdi:multimedia',
+        dotdotdot: loadingMedia,
       });
     }