Improve comments rendering

- Don't render summary/details if not needed
- Delay-render collapsed summary/details

src/locales/en.po

@@ -186,7 +186,7 @@ msgstr ""
 #: src/pages/catchup.jsx:1445
 #: src/pages/catchup.jsx:2056
 #: src/pages/status.jsx:921
-#: src/pages/status.jsx:1523
+#: src/pages/status.jsx:1543
 msgid "Replies"
 msgstr ""
 
@@ -3636,15 +3636,15 @@ msgstr ""
 msgid "Unable to load post"
 msgstr ""
 
-#: src/pages/status.jsx:1455
+#: src/pages/status.jsx:1473
 msgid "{0, plural, one {# reply} other {<0>{1}</0> replies}}"
 msgstr ""
 
-#: src/pages/status.jsx:1473
+#: src/pages/status.jsx:1491
 msgid "{totalComments, plural, one {# comment} other {<0>{0}</0> comments}}"
 msgstr ""
 
-#: src/pages/status.jsx:1495
+#: src/pages/status.jsx:1513
 msgid "View post with its replies"
 msgstr ""
 

src/pages/status.jsx

@@ -1423,22 +1423,40 @@ function SubComments({
     };
   }, []);
 
+  // If not open, delay render replies
+  const [renderReplies, setRenderReplies] = useState(openBefore || open);
+  useEffect(() => {
+    let timer;
+    if (!openBefore && !open) {
+      timer = setTimeout(() => setRenderReplies(true), 100);
+    }
+    return () => clearTimeout(timer);
+  }, [openBefore, open]);
+
+  const Container = open ? 'div' : 'details';
+  const isDetails = Container === 'details';
+
   return (
-    <details
+    <Container
       ref={detailsRef}
       class="replies"
-      open={openBefore || open}
-      onToggle={(e) => {
+      open={isDetails ? openBefore || open : undefined}
+      onToggle={
+        isDetails
+          ? (e) => {
               const { open } = e.target;
               // use first reply as ID
               cachedRepliesToggle[replies[0].id] = open;
-      }}
+            }
+          : undefined
+      }
       style={{
         '--comments-level': level,
       }}
       data-comments-level={level}
       data-comments-level-overflow={level > 4}
     >
+      {!open && (
         <summary class="replies-summary" hidden={open}>
           <span class="avatars">
             {accounts.map((a) => (
@@ -1498,6 +1516,8 @@ function SubComments({
             </Link>
           )}
         </summary>
+      )}
+      {renderReplies && (
         <ul>
           {replies.map((r) => (
             <li key={r.id}>
@@ -1546,7 +1566,8 @@ function SubComments({
             </li>
           ))}
         </ul>
-    </details>
+      )}
+    </Container>
   );
 }