Render guest comment snapshots before auth gating

js/ui/videoModalCommentController.js

@@ -201,7 +201,6 @@ export default class VideoModalCommentController {
     this.videoModal.clearComments?.();
     this.videoModal.resetCommentComposer?.();
     this.videoModal.setCommentStatus?.("Loading comments…");
-    this.applyCommentComposerAuthState();
 
     const loadPromise = this.commentThreadService.loadThread({
       video,
@@ -216,11 +215,15 @@ export default class VideoModalCommentController {
 
     this.modalCommentLoadPromise = loadPromise;
     loadPromise
-      .then(() => {
+      .then((snapshot) => {
         if (this.modalCommentLoadPromise === loadPromise) {
           this.modalCommentLoadPromise = null;
         }
-        this.applyCommentComposerAuthState();
+
+        const didRenderSnapshot = this.handleCommentThreadReady(snapshot);
+        if (didRenderSnapshot === false) {
+          this.applyCommentComposerAuthState();
+        }
       })
       .catch((error) => {
         if (this.modalCommentLoadPromise === loadPromise) {
@@ -355,14 +358,14 @@ export default class VideoModalCommentController {
 
   handleCommentThreadReady(snapshot) {
     if (!snapshot || !this.videoModal) {
-      return;
+      return false;
     }
 
     const snapshotVideoEventId = normalizeHexId(snapshot.videoEventId);
     const modalVideoEventId = normalizeHexId(this.modalCommentState.videoEventId);
 
     if (!snapshotVideoEventId || snapshotVideoEventId !== modalVideoEventId) {
-      return;
+      return false;
     }
 
     this.modalCommentProfiles = this.createMapFromInput(snapshot.profiles, {
@@ -405,6 +408,7 @@ export default class VideoModalCommentController {
     this.videoModal.renderComments?.(sanitizedSnapshot);
     this.videoModal.setCommentStatus?.("");
     this.applyCommentComposerAuthState();
+    return true;
   }
 
   handleCommentThreadAppend(payload) {

tests/video-modal-comments.test.mjs

@@ -186,6 +186,60 @@ test(
   },
 );
 
+test(
+  "Guest users render loaded thread snapshots before composer auth enforcement",
+  async (t) => {
+    const { modal, cleanup } = await setupModal();
+    t.after(cleanup);
+
+    const snapshot = {
+      videoEventId: "video-loaded-snapshot",
+      parentCommentId: null,
+      commentsById: new Map([
+        [
+          "loaded-comment",
+          createCommentEvent({
+            id: "loaded-comment",
+            pubkey: "pk-loaded",
+            content: "Snapshot content shows up",
+            createdAt: 1700000100,
+          }),
+        ],
+      ]),
+      childrenByParent: new Map([[null, ["loaded-comment"]]]),
+      profiles: new Map([["pk-loaded", { name: "Loaded" }]]),
+    };
+
+    const controller = new VideoModalCommentController({
+      commentThreadService: {
+        defaultLimit: 1,
+        setCallbacks: () => {},
+        teardown: () => {},
+        loadThread: () => Promise.resolve(snapshot),
+      },
+      videoModal: modal,
+      auth: {
+        isLoggedIn: () => false,
+      },
+    });
+
+    controller.load({ id: "video-loaded-snapshot", enableComments: true });
+    await controller.modalCommentLoadPromise;
+
+    const renderedComments = Array.from(
+      modal.commentsList.querySelectorAll("[data-comment-id]") || [],
+    );
+    assert.equal(renderedComments.length, 1);
+    assert.equal(renderedComments[0].dataset.commentId, "loaded-comment");
+
+    const statusText =
+      modal.commentsStatusMessage?.textContent.trim().replace(/\s+/g, " ") ||
+      "";
+    assert.equal(statusText, "");
+    assert.equal(modal.commentComposerState.reason, "login-required");
+  },
+);
+
 test(
   "VideoModalCommentController attaches profiles using normalized pubkeys",
   async () => {