@flamingo-stack/openframe-frontend-core 0.0.247 → 0.0.249

package/src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx

@@ -1,46 +1,41 @@
 'use client'
 
-import { DevSectionPage } from '../shared/dev-section'
 import { OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card'
 
 /**
- * Page-level Suspense fallback for `/onboarding-guides`.
+ * Loading skeleton for `/onboarding-guides` — CHROME-LESS, exactly like the
+ * loaded `<OnboardingGuidesCatalogView>`. The HOST page owns the
+ * `<DevSectionPage sectionKey="onboarding">` shell (hero + back button);
+ * this component renders only what replaces the view: the search/pill
+ * placeholder block and the section card lists.
  *
- * Mirrors the loaded `<OnboardingGuidesCatalogView>` shape — both
- * mount the same `<DevSectionPage sectionKey="onboarding">` so the
- * hero, back button, and overall page scaffold render identically.
+ * HISTORY: this used to mount its own `<DevSectionPage>` — nested inside the
+ * page's shell that double-rendered the hero + back button during loading
+ * (the view was made chrome-less in the page restructure; the skeleton was
+ * missed). Keep BOTH chrome-less.
  *
- * The `preControls` slot reserves space for the search bar (h-12)
- * plus the section pill row (~74px including padding) so the
- * Suspense → loaded transition doesn't shift vertically.
- *
- * Card distribution `4 + 3 + 3 = 10` matches the typical openframe
- * onboarding dataset; per-card height (288 px) is byte-identical to
- * the loaded card so per-card shifts on resolve are zero.
+ * Wrapper mirrors the loaded view's `w-full flex flex-col gap-10`; per-card
+ * height matches the loaded catalog card so resolve shifts are zero.
  */
 export function OnboardingGuidesCatalogSkeleton() {
   return (
-    <DevSectionPage
-      sectionKey="onboarding"
-      preControls={
-        <div className="space-y-4 animate-pulse">
-          {/* Search input placeholder — matches `<SearchInput>` h-12. */}
-          <div className="h-12 w-full bg-ods-card border border-ods-border rounded-md" />
-          {/* Section pill row placeholder — same wrapper class set the
-              hub-side `<FilterSection>` uses (~74 px). */}
-          <div className="flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg">
-            <div className="h-4 w-14 bg-ods-border/60 rounded" />
-            {[0, 1, 2, 3].map((i) => (
-              <div
-                key={i}
-                className="h-10 w-24 bg-ods-card border border-ods-border rounded-md"
-              />
-            ))}
-          </div>
+    <div className="w-full flex flex-col gap-10 animate-pulse">
+      {/* Search input placeholder — matches `<SearchInput>` h-12 — plus the
+          section pill row (~74 px incl. padding), same as the loaded
+          preControls block. */}
+      <div className="space-y-4">
+        <div className="h-12 w-full bg-ods-card border border-ods-border rounded-md" />
+        <div className="flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg">
+          <div className="h-4 w-14 bg-ods-border/60 rounded" />
+          {[0, 1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="h-10 w-24 bg-ods-card border border-ods-border rounded-md"
+            />
+          ))}
         </div>
-      }
-    >
-      <div className="space-y-10 animate-pulse">
+      </div>
+      <div className="space-y-10">
         {[4, 3, 3].map((cardCount, sectionIdx) => (
           <section key={sectionIdx} className="space-y-4">
             <h2 className="text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2">
@@ -57,6 +52,6 @@ export function OnboardingGuidesCatalogSkeleton() {
           </section>
         ))}
       </div>
-    </DevSectionPage>
+    </div>
   )
 }