From 690929aa320085b858284af47b4570297f71cc76 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 15 May 2026 11:42:09 +0530
Subject: [PATCH] fix: improve default theme skeleton loader

- Use loop for content lines matching paper theme pattern
- Add containerClassName for proper spacing (loader, headerLoader)
- Remove hardcoded loading state

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Page.module.css        |  9 +++++++++
 .../chronicle/src/themes/default/Skeleton.tsx | 20 +++++--------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css
index f6a8b68c..e8e78cd6 100644
--- a/packages/chronicle/src/themes/default/Page.module.css
+++ b/packages/chronicle/src/themes/default/Page.module.css
@@ -125,3 +125,12 @@
 .content details > :not(summary) {
   padding: var(--rs-space-4) var(--rs-space-5);
 }
+
+.loader {
+  flex: 1;
+  margin-bottom: var(--rs-space-3);
+}
+
+.headerLoader {
+  margin-bottom: var(--rs-space-5);
+}
diff --git a/packages/chronicle/src/themes/default/Skeleton.tsx b/packages/chronicle/src/themes/default/Skeleton.tsx
index b8cde1ea..b2e80725 100644
--- a/packages/chronicle/src/themes/default/Skeleton.tsx
+++ b/packages/chronicle/src/themes/default/Skeleton.tsx
@@ -6,21 +6,11 @@ export function PageSkeleton() {
   return (
     <Flex className={styles.page}>
       <article className={styles.article}>
-        <Skeleton width="40%" height="32px" />
-        <Skeleton.Provider duration={2}>
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="95%" height="16px" />
-          <Skeleton width="80%" height="16px" />
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="60%" height="16px" />
-        </Skeleton.Provider>
-        <Skeleton width="30%" height="24px" />
-        <Skeleton.Provider duration={2}>
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="90%" height="16px" />
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="70%" height="16px" />
-        </Skeleton.Provider>
+        <Skeleton width="40%" height="var(--rs-line-height-t2)" containerClassName={styles.headerLoader} />
+        <Skeleton width="60%" height="var(--rs-line-height-regular)" containerClassName={styles.headerLoader} />
+        {[...new Array(20)].map((_, i) => (
+          <Skeleton key={i} width="100%" height="var(--rs-line-height-regular)" containerClassName={styles.loader} />
+        ))}
       </article>
     </Flex>
   );