From 558c83693f9ea0b50126763a1d4e78c861e3cda0 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 31 Aug 2026 20:32:48 -0700
Subject: [PATCH 1/4] add skeleton

---
 .../src/features/collections/templates/rwp-skeleton.ts | 10 ++++++++++
 frontend/src/pages/collections/collection.ts           |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/collections/templates/rwp-skeleton.ts

diff --git a/frontend/src/features/collections/templates/rwp-skeleton.ts b/frontend/src/features/collections/templates/rwp-skeleton.ts
new file mode 100644
index 0000000000..202c1c9152
--- /dev/null
+++ b/frontend/src/features/collections/templates/rwp-skeleton.ts
@@ -0,0 +1,10 @@
+import { html } from "lit";
+
+export function rwpSkeleton() {
+  return html`<div
+    class="pointer-events-none absolute inset-0 flex flex-col gap-3"
+  >
+    <div class="h-[3.625rem] rounded-lg border bg-neutral-50"></div>
+    <div class="flex-1 rounded-lg border"></div>
+  </div>`;
+}
diff --git a/frontend/src/pages/collections/collection.ts b/frontend/src/pages/collections/collection.ts
index 148dca936a..ccee00428b 100644
--- a/frontend/src/pages/collections/collection.ts
+++ b/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,6 +30,7 @@ enum PublicTab {
 @customElement("btrix-collection")
 export class Collection extends BtrixElement {
   @provide({ context: collectionRwpContext })
+  @state()
   replayEmbed?: ReplayWebPage | null;
 
   @property({ type: 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-[calc(100vh-4rem)]">
         <replay-web-page
           source=${replaySource}
           url=${ifDefined(collection.homeUrl || undefined)}
@@ -282,6 +284,8 @@ export class Collection extends BtrixElement {
             }
           }}
         ></replay-web-page>
+
+        ${when(!this.replayEmbed, () => rwpSkeleton())}
       </section>
     `;
   }

From a91329b4ff577733b91a531bcc2a828438b4e19d Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 31 Aug 2026 20:52:51 -0700
Subject: [PATCH 2/4] use skeleton

---
 .../collections/templates/rwp-skeleton.ts      |  2 +-
 frontend/src/pages/collections/collection.ts   |  9 ++++++---
 .../org/collection-detail/collection-detail.ts | 18 +++++++++++++-----
 frontend/src/theme.stylesheet.css              |  3 +++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/collections/templates/rwp-skeleton.ts b/frontend/src/features/collections/templates/rwp-skeleton.ts
index 202c1c9152..37c7138e69 100644
--- a/frontend/src/features/collections/templates/rwp-skeleton.ts
+++ b/frontend/src/features/collections/templates/rwp-skeleton.ts
@@ -2,7 +2,7 @@ import { html } from "lit";
 
 export function rwpSkeleton() {
   return html`<div
-    class="pointer-events-none absolute inset-0 flex flex-col gap-3"
+    class="pointer-events-none flex h-[--btrix-rwp-height] flex-col gap-3"
   >
     <div class="h-[3.625rem] rounded-lg border bg-neutral-50"></div>
     <div class="flex-1 rounded-lg border"></div>
diff --git a/frontend/src/pages/collections/collection.ts b/frontend/src/pages/collections/collection.ts
index ccee00428b..5c31f63959 100644
--- a/frontend/src/pages/collections/collection.ts
+++ b/frontend/src/pages/collections/collection.ts
@@ -31,7 +31,7 @@ enum PublicTab {
 export class Collection extends BtrixElement {
   @provide({ context: collectionRwpContext })
   @state()
-  replayEmbed?: ReplayWebPage | null;
+  private replayEmbed?: ReplayWebPage | null;
 
   @property({ type: String })
   orgSlug?: string;
@@ -263,7 +263,7 @@ export class Collection extends BtrixElement {
     ).href;
 
     return html`
-      <section class="relative h-[calc(100vh-4rem)]">
+      <section class="relative h-[--btrix-rwp-height]">
         <replay-web-page
           source=${replaySource}
           url=${ifDefined(collection.homeUrl || undefined)}
@@ -285,7 +285,10 @@ export class Collection extends BtrixElement {
           }}
         ></replay-web-page>
 
-        ${when(!this.replayEmbed, () => rwpSkeleton())}
+        ${when(
+          !this.replayEmbed,
+          () => html`<div class="absolute inset-0">${rwpSkeleton()}</div>`,
+        )}
       </section>
     `;
   }
diff --git a/frontend/src/pages/org/collection-detail/collection-detail.ts b/frontend/src/pages/org/collection-detail/collection-detail.ts
index c912faaa5c..30a956ca96 100644
--- a/frontend/src/pages/org/collection-detail/collection-detail.ts
+++ b/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,7 @@ export class CollectionDetail extends BtrixElement {
               tw`offscreen`,
         )}
       >
-        ${when(this.collection, this.guardedRenderReplay, this.renderSpinner)}
+        ${when(this.collection, this.guardedRenderReplay)}
       </section>
 
       ${choose(this.collectionTab, [
@@ -1357,9 +1359,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 +1379,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}
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index ca52aae05b..fa5a394c68 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/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
      */

From 566f07abc9193deabf6fbf5bfd8fae73007c35b3 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 1 Sep 2026 10:37:55 -0700
Subject: [PATCH 3/4] use skeleton

---
 .../src/features/collections/templates/rwp-skeleton.ts    | 8 +++++---
 .../src/pages/org/collection-detail/collection-detail.ts  | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/collections/templates/rwp-skeleton.ts b/frontend/src/features/collections/templates/rwp-skeleton.ts
index 37c7138e69..49b40d3ab4 100644
--- a/frontend/src/features/collections/templates/rwp-skeleton.ts
+++ b/frontend/src/features/collections/templates/rwp-skeleton.ts
@@ -1,10 +1,12 @@
-import { html } from "lit";
+import { html, nothing } from "lit";
 
-export function rwpSkeleton() {
+export function rwpSkeleton(toolbar = true) {
   return html`<div
     class="pointer-events-none flex h-[--btrix-rwp-height] flex-col gap-3"
   >
-    <div class="h-[3.625rem] rounded-lg border bg-neutral-50"></div>
+    ${toolbar
+      ? html`<div class="h-[3.625rem] rounded-lg border bg-neutral-50"></div>`
+      : nothing}
     <div class="flex-1 rounded-lg border"></div>
   </div>`;
 }
diff --git a/frontend/src/pages/org/collection-detail/collection-detail.ts b/frontend/src/pages/org/collection-detail/collection-detail.ts
index 30a956ca96..be74828913 100644
--- a/frontend/src/pages/org/collection-detail/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail/collection-detail.ts
@@ -563,7 +563,9 @@ export class CollectionDetail extends BtrixElement {
               tw`offscreen`,
         )}
       >
-        ${when(this.collection, this.guardedRenderReplay)}
+        ${when(this.collection, this.guardedRenderReplay, () =>
+          rwpSkeleton(false),
+        )}
       </section>
 
       ${choose(this.collectionTab, [

From eb4fd6f7f80dd1184f84c0275e4b84959964c97e Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 1 Sep 2026 13:23:51 -0700
Subject: [PATCH 4/4] fix purge and reload

---
 .../collections/helpers/injectRwpStyles.ts    | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/collections/helpers/injectRwpStyles.ts b/frontend/src/features/collections/helpers/injectRwpStyles.ts
index 291a749722..69e6412a41 100644
--- a/frontend/src/features/collections/helpers/injectRwpStyles.ts
+++ b/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();
 }