Handle null replicas in browser profile (#1765)

Fixes https://github.com/webrecorder/browsertrix/issues/1764

### Changes

- Handles profile `resource.replicas` being null
- Adds loading indicator when browser profile list is loading

frontend/src/pages/org/browser-profiles-list.ts

@@ -1,6 +1,7 @@
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
 
 import type { Profile } from "./types";
 
@@ -92,20 +93,31 @@ export class BrowserProfilesList extends LiteElement {
             `
           : nothing}
       </btrix-table>
-      ${this.browserProfiles?.length
+      ${when(
-        ? nothing
+        this.browserProfiles,
-        : html`
+        (browserProfiles) =>
-            <div class="border-b border-t py-5">
+          browserProfiles.length
-              <p class="text-center text-0-500">
+            ? nothing
-                ${msg("No browser profiles yet.")}
+            : html`
-              </p>
+                <div class="border-b border-t py-5">
-            </div>
+                  <p class="text-center text-0-500">
-          `}
+                    ${msg("No browser profiles yet.")}
+                  </p>
+                </div>
+              `,
+        this.renderLoading,
+      )}
     `;
   }
 
+  private readonly renderLoading = () =>
+    html`<div class="my-24 flex w-full items-center justify-center text-3xl">
+      <sl-spinner></sl-spinner>
+    </div>`;
+
   private readonly renderItem = (data: Profile) => {
-    const isBackedUp = data.resource && data.resource.replicas.length > 0;
+    const isBackedUp =
+      data.resource?.replicas && data.resource.replicas.length > 0;
     return html`
       <btrix-table-row
         class="cursor-pointer select-none rounded border shadow transition-all focus-within:bg-neutral-50 hover:bg-neutral-50 hover:shadow-none"

frontend/src/types/crawler.ts

@@ -108,7 +108,7 @@ export type Profile = {
     path: string;
     hash: string;
     size: number;
-    replicas: ProfileReplica[];
+    replicas: ProfileReplica[] | null;
   };
 };