fix: Handle loading collection replay

frontend/src/features/collections/helpers/injectRwpStyles.ts

@@ -8,12 +8,46 @@ export function injectRwpStyles(replayEmbed: ReplayWebPage | null | undefined) {
     return;
   }
 
-  const iframeDoc =
-    replayEmbed.shadowRoot?.querySelector("iframe")?.contentDocument;
+  const iframe = replayEmbed.shadowRoot?.querySelector("iframe");
+
+  if (!iframe) {
+    console.debug("no replayEmbed iframe");
+    return;
+  }
+
+  const appendStyles = () => {
+    const iframeDoc =
+      replayEmbed.shadowRoot?.querySelector("iframe")?.contentDocument;
+
+    if (!iframeDoc) {
+      console.debug("no iframeDoc");
+      return;
+    }
 
-  if (iframeDoc) {
     const style = iframeDoc.createElement("style");
     style.textContent = replayStylesheet;
-    iframeDoc.head.appendChild(style);
-  }
+    iframeDoc.body.appendChild(style);
+  };
+
+  // TODO Refactor how styles are injected
+  // https://github.com/webrecorder/replayweb.page/issues/553
+  const injectStyles = () => {
+    appendStyles();
+
+    iframe.contentWindow?.addEventListener(
+      "beforeunload",
+      () => {
+        iframe.addEventListener(
+          "load",
+          () => {
+            injectStyles();
+          },
+          { once: true },
+        );
+      },
+      { once: true },
+    );
+  };
+
+  injectStyles();
 }

frontend/src/features/collections/templates/rwp-skeleton.ts

@@ -0,0 +1,12 @@
+import { html, nothing } from "lit";
+
+export function rwpSkeleton(toolbar = true) {
+  return html`<div
+    class="pointer-events-none flex h-[--btrix-rwp-height] flex-col gap-3"
+  >
+    ${toolbar
+      ? html`<div class="h-[3.625rem] rounded-lg border bg-neutral-50"></div>`
+      : nothing}
+    <div class="flex-1 rounded-lg border"></div>
+  </div>`;
+}

frontend/src/pages/collections/collection.ts

@@ -11,6 +11,7 @@ import { BtrixElement } from "@/classes/BtrixElement";
 import { collectionRwpContext } from "@/features/collections/context/collection-rwp";
 import { injectRwpStyles } from "@/features/collections/helpers/injectRwpStyles";
 import { SelectCollectionAccess } from "@/features/collections/select-collection-access";
+import { rwpSkeleton } from "@/features/collections/templates/rwp-skeleton";
 import { metadataColumn } from "@/layouts/collections/metadataColumn";
 import { page } from "@/layouts/page";
 import { type CollectionSavedEvent } from "@/pages/org/collection-detail/types";
@@ -29,7 +30,8 @@ enum PublicTab {
 @customElement("btrix-collection")
 export class Collection extends BtrixElement {
   @provide({ context: collectionRwpContext })
-  replayEmbed?: ReplayWebPage | null;
+  @state()
+  private replayEmbed?: ReplayWebPage | null;
 
   @property({ type: String })
   orgSlug?: string;
@@ -261,7 +263,7 @@ export class Collection extends BtrixElement {
     ).href;
 
     return html`
-      <section class="h-[calc(100vh-4rem)] overflow-hidden rounded-lg">
+      <section class="relative h-[--btrix-rwp-height]">
         <replay-web-page
           source=${replaySource}
           url=${ifDefined(collection.homeUrl || undefined)}
@@ -282,6 +284,11 @@ export class Collection extends BtrixElement {
             }
           }}
         ></replay-web-page>
+
+        ${when(
+          !this.replayEmbed,
+          () => html`<div class="absolute inset-0">${rwpSkeleton()}</div>`,
+        )}
       </section>
     `;
   }

frontend/src/pages/org/collection-detail/collection-detail.ts

@@ -42,6 +42,7 @@ import { SelectCollectionAccess } from "@/features/collections/select-collection
 import { createIndexDialog } from "@/features/collections/templates/create-index-dialog";
 import { deleteIndexDialog } from "@/features/collections/templates/delete-index-dialog";
 import { purgeIndexDialog } from "@/features/collections/templates/purge-index-dialog";
+import { rwpSkeleton } from "@/features/collections/templates/rwp-skeleton";
 import {
   metadataColumn,
   metadataItemWithCollection,
@@ -118,7 +119,8 @@ export class CollectionDetail extends BtrixElement {
   viewState?: ViewStateContext;
 
   @provide({ context: collectionRwpContext })
-  replayEmbed?: ReplayWebPage | null;
+  @state()
+  private replayEmbed?: ReplayWebPage | null;
 
   @query("btrix-collection-page-header")
   private readonly pageHeader?: CollectionPageHeader | null;
@@ -561,7 +563,9 @@ export class CollectionDetail extends BtrixElement {
               tw`offscreen`,
         )}
       >
-        ${when(this.collection, this.guardedRenderReplay, this.renderSpinner)}
+        ${when(this.collection, this.guardedRenderReplay, () =>
+          rwpSkeleton(false),
+        )}
       </section>
 
       ${choose(this.collectionTab, [
@@ -1357,9 +1361,15 @@ export class CollectionDetail extends BtrixElement {
   `;
 
   private readonly guardedRenderReplay = (collection: Collection) => {
-    return guard([collection.crawlCount], () =>
+    return guard([collection.crawlCount, this.replayEmbed], () =>
       collection.crawlCount
-        ? guard([this.collectionId], this.renderReplay)
+        ? html`<div class="relative">
+            ${guard([this.collectionId], this.renderReplay)}
+            ${when(
+              !this.replayEmbed,
+              () => html`<div class="absolute inset-0">${rwpSkeleton()}</div>`,
+            )}
+          </div>`
         : this.renderEmptyState(),
     );
   };
@@ -1371,7 +1381,7 @@ export class CollectionDetail extends BtrixElement {
 
     return html`
       <replay-web-page
-        class="h-[calc(100vh-4rem)]"
+        class="h-[--btrix-rwp-height]"
         source=${replaySource}
         config="${config}"
         coll=${this.collectionId}

frontend/src/theme.stylesheet.css

@@ -32,6 +32,9 @@
     /* Default border */
     --btrix-border: 1px solid var(--sl-panel-border-color);
 
+    /* Replay */
+    --btrix-rwp-height: calc(100vh - 4rem);
+
     /*
      * Shoelace Theme Tokens
      */