From 37cb297d012fb5f55ea8ed9e9acaaa91b85949fe Mon Sep 17 00:00:00 2001
From: sua yoo <sua@webrecorder.org>
Date: Tue, 30 Apr 2024 10:47:40 -0700
Subject: [PATCH] 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
---
 .../src/pages/org/browser-profiles-list.ts    | 32 +++++++++++++------
 frontend/src/types/crawler.ts                 |  2 +-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index def2ba8a..65bf3a1d 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/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
-        ? nothing
-        : html`
-            <div class="border-b border-t py-5">
-              <p class="text-center text-0-500">
-                ${msg("No browser profiles yet.")}
-              </p>
-            </div>
-          `}
+      ${when(
+        this.browserProfiles,
+        (browserProfiles) =>
+          browserProfiles.length
+            ? nothing
+            : html`
+                <div class="border-b border-t py-5">
+                  <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"
diff --git a/frontend/src/types/crawler.ts b/frontend/src/types/crawler.ts
index 3c068d5f..35c69445 100644
--- a/frontend/src/types/crawler.ts
+++ b/frontend/src/types/crawler.ts
@@ -108,7 +108,7 @@ export type Profile = {
     path: string;
     hash: string;
     size: number;
-    replicas: ProfileReplica[];
+    replicas: ProfileReplica[] | null;
   };
 };