fix(docs): fill the Ask Sim UI gap while the panel chunk loads

waleedlatif1 · waleedlatif1 · commit 16145dcd6098 · 2026-07-12T17:55:50.000-07:00
handleOpen set open=true synchronously, hiding the trigger button
before the dynamically imported panel had a chance to render anything
(next/dynamic renders null by default with no loading option) - on a
slow connection neither the button nor the panel was visible.

Added a loading fallback in the same fixed position so there's no gap
between the button disappearing and the real panel appearing.
diff --git a/apps/docs/components/ai/ask-ai.tsx b/apps/docs/components/ai/ask-ai.tsx
@@ -6,6 +6,14 @@ import dynamic from 'next/dynamic'
 
 const AskAIPanel = dynamic(() => import('./ask-ai-panel').then((m) => m.AskAIPanel), {
   ssr: false,
+  loading: () => (
+    <div
+      aria-hidden
+      className='fixed right-4 bottom-4 z-50 flex size-11 items-center justify-center rounded-full border border-[var(--border-1)] bg-[var(--surface-5)] shadow-[var(--shadow-medium)] dark:bg-[var(--surface-4)]'
+    >
+      <MessageCircle className='size-[16px] animate-pulse text-[var(--text-icon)]' />
+    </div>
+  ),
 })
 
 interface AskAIProps {
