@sybilion/uilib 1.3.18 → 1.3.19

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.js

@@ -111,7 +111,7 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
                 return (jsx(BaseChartWrapper, { ...baseChartProps, chartClassName: cn(S.chartContainer, chartContainerClassName) }));
         }
     };
-    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), jsx(TimeRangeBrushHost, { chartData: bridgedChartData, onTimeRangeChange: onTimeRangeChange, enabled: brushEnabled, layoutKey: chartRenderId ?? null, children: renderChart() })] }));
+    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), disabled: loading, children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), jsx(TimeRangeBrushHost, { chartData: bridgedChartData, onTimeRangeChange: onTimeRangeChange, enabled: brushEnabled, layoutKey: chartRenderId ?? null, children: renderChart() })] }));
 }
 
 export { ChartAreaInteractive, chartConfig };

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -4,7 +4,7 @@ import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js'
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
-import { useChatsForScopeId, useChat, useChatOutboundPending, isChatEmpty } from '../../../../contexts/chat-context.js';
+import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -31,6 +31,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const chat = useChat(effectiveScopeId, currentChatId);
     const isOutboundPending = useChatOutboundPending(effectiveScopeId, currentChatId);
     const isLoading = isOutboundPending || localUiBusy;
+    useSyncChatPanelBusy(isLoading);
     const { searchParams, addSearchParams, removeSearchParams, mutateSearchParams, } = useQueryParams();
     const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
     const [isOpen, setIsOpen] = useState(false);

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.js

@@ -1,22 +1,25 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useCallback, useEffect } from 'react';
+import { useIsChatLoading } from '../../../contexts/chat-context.js';
 import { useIsTouchDevice } from '../../../hooks/useIsTouchDevice.js';
 import S from './InteractionOverlay.styl.js';
 
-function InteractionOverlay({ className, children, message = 'Touch to interact', }) {
+function InteractionOverlay({ className, children, message = 'Touch to interact', disabled = false, }) {
     const isTouchDevice = useIsTouchDevice();
+    const isChatLoading = useIsChatLoading();
+    const suppressOverlay = disabled || isChatLoading;
     const [isVisible, setIsVisible] = useState(true);
     const handleClick = useCallback(() => {
         setIsVisible(false);
     }, []);
     useEffect(() => {
-        if (isTouchDevice) {
+        if (isTouchDevice && !suppressOverlay) {
             setIsVisible(true);
         }
-    }, [isTouchDevice]);
+    }, [isTouchDevice, suppressOverlay]);
     useEffect(() => {
-        if (!isTouchDevice)
+        if (!isTouchDevice || suppressOverlay)
             return;
         const handleScroll = () => {
             setIsVisible(true);
@@ -25,11 +28,11 @@ function InteractionOverlay({ className, children, message = 'Touch to interact'
         return () => {
             document.removeEventListener('scroll', handleScroll, { capture: true });
         };
-    }, [isTouchDevice]);
+    }, [isTouchDevice, suppressOverlay]);
     if (!isTouchDevice) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs("div", { className: cn(S.root, !isVisible && S.hidden, className), children: [children, jsx("button", { type: "button", className: S.overlay, onClick: handleClick, "aria-label": message, children: jsx("span", { className: S.message, children: message }) })] }));
+    return (jsxs("div", { className: cn(S.root, (!isVisible || suppressOverlay) && S.hidden, className), children: [children, jsx("button", { type: "button", className: S.overlay, onClick: handleClick, "aria-label": message, children: jsx("span", { className: S.message, children: message }) })] }));
 }
 
 export { InteractionOverlay };

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractionOverlay_root__9FV58{position:relative}.InteractionOverlay_overlay__Nwawr{background:transparent;border:none;box-shadow:inset 0 0 80px 40px var(--overlay-background-color);cursor:pointer;inset:0;margin:0;padding:0;position:absolute;touch-action:manipulation;transition:box-shadow .2s ease-out;z-index:4}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr{box-shadow:inset 0 0 0 0 var(--overlay-background-color);pointer-events:none}.InteractionOverlay_message__oCuPR{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--overlay-background-color) 80%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);border-radius:9999px;box-shadow:0 0 24px 10px var(--overlay-background-color),0 0 0 1px color-mix(in srgb,var(--overlay-background-color) 40%,transparent);color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;line-height:1.25;padding:var(--p-3) var(--p-5);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s ease-out;transition-property:transform,opacity;white-space:nowrap;z-index:1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_message__oCuPR{opacity:0;transform:translate(-50%,-50%) scale(.3)}:root{--overlay-background-color:var(--page-color)}";
+var css_248z = ".InteractionOverlay_root__9FV58{position:relative}.InteractionOverlay_overlay__Nwawr{background:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute;touch-action:manipulation;z-index:4}.InteractionOverlay_overlay__Nwawr:before{background-color:color-mix(in srgb,var(--overlay-background-color) 70%,transparent);bottom:calc(var(--p-2)*-1);box-shadow:inset 0 0 80px 40px var(--overlay-background-color);content:\"\";left:calc(var(--p-2)*-1);pointer-events:none;position:absolute;right:calc(var(--p-2)*-1);top:calc(var(--p-2)*-1);transition:.2s ease-out;transition-property:box-shadow,background-color;z-index:-1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr{pointer-events:none}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr:before{background-color:transparent;box-shadow:inset 0 0 0 0 var(--overlay-background-color)}.InteractionOverlay_message__oCuPR{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--overlay-background-color) 80%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);border-radius:9999px;box-shadow:0 0 24px 10px var(--overlay-background-color),0 0 0 1px color-mix(in srgb,var(--overlay-background-color) 40%,transparent);color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;line-height:1.25;padding:var(--p-3) var(--p-5);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s ease-out;transition-property:transform,opacity;white-space:nowrap;z-index:1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_message__oCuPR{opacity:0;transform:translate(-50%,-50%) scale(.3)}:root{--overlay-background-color:var(--page-color)}";
 var S = {"root":"InteractionOverlay_root__9FV58","overlay":"InteractionOverlay_overlay__Nwawr","hidden":"InteractionOverlay_hidden__NRlgG","message":"InteractionOverlay_message__oCuPR"};
 styleInject(css_248z);
 

package/dist/esm/contexts/chat-context.js

@@ -92,6 +92,13 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
         return loadChatsFromLS(userSwitchKey).currentChatId;
     });
     const [outboundPendingByKey, setOutboundPendingByKey] = useState({});
+    const [panelBusyCount, setPanelBusyCount] = useState(0);
+    const acquirePanelBusy = useCallback(() => {
+        setPanelBusyCount(count => count + 1);
+    }, []);
+    const releasePanelBusy = useCallback(() => {
+        setPanelBusyCount(count => Math.max(0, count - 1));
+    }, []);
     const beginOutboundPending = useCallback((scopeId, chatSessionId) => {
         const key = outboundPendingKey(scopeId, chatSessionId);
         setOutboundPendingByKey(prev => ({
@@ -282,6 +289,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             setChats({});
             setCurrentChatIdState({});
             setOutboundPendingByKey({});
+            setPanelBusyCount(0);
             return;
         }
         const loaded = loadChatsFromLS(userSwitchKey);
@@ -306,6 +314,9 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             getCurrentChatId,
             deleteChat,
             outboundPendingByKey,
+            panelBusyCount,
+            acquirePanelBusy,
+            releasePanelBusy,
         }, children: children }));
 }
 const isChatEmpty = (chat) => chat?.messages.length === 0;
@@ -334,6 +345,29 @@ function useChatOutboundPending(scopeId, chatSessionId) {
         return (outboundPendingByKey[key] ?? 0) > 0;
     }, [scopeId, chatSessionId, outboundPendingByKey]);
 }
+/** True when chat is waiting on API or panel UI busy (safe outside ChatProvider). */
+function useIsChatLoading() {
+    const context = useContext(ChatContext);
+    return useMemo(() => {
+        if (!context)
+            return false;
+        const outboundPending = Object.values(context.outboundPendingByKey).some(count => count > 0);
+        return outboundPending || context.panelBusyCount > 0;
+    }, [context?.outboundPendingByKey, context?.panelBusyCount]);
+}
+/** Syncs chat panel `isLoading` into context for touch-overlay suppression. */
+function useSyncChatPanelBusy(isLoading) {
+    const acquirePanelBusy = useContext(ChatContext)?.acquirePanelBusy;
+    const releasePanelBusy = useContext(ChatContext)?.releasePanelBusy;
+    useEffect(() => {
+        if (!isLoading || !acquirePanelBusy || !releasePanelBusy)
+            return;
+        acquirePanelBusy();
+        return () => {
+            releasePanelBusy();
+        };
+    }, [isLoading, acquirePanelBusy, releasePanelBusy]);
+}
 function useChatsForScopeId(scopeId) {
     const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
@@ -363,4 +397,4 @@ function useCurrentChat(scopeId) {
     return useChat(scopeId, chatId ?? undefined);
 }
 
-export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat, useIsChatLoading, useSyncChatPanelBusy };

package/dist/esm/index.js

@@ -6,7 +6,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
-export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat, useIsChatLoading, useSyncChatPanelBusy } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';
 export { AnalysisLineIcon } from './components/ui/AnalysisLineIcon/AnalysisLineIcon.js';
 export { AppHeaderHost, AppHeaderPortal } from './components/ui/AppHeader/AppHeader.js';

package/dist/esm/types/src/components/ui/InteractionOverlay/InteractionOverlay.d.ts

@@ -2,6 +2,8 @@ interface InteractionOverlayProps {
     className?: string;
     children?: React.ReactNode;
     message?: string;
+    /** When true, hides the touch overlay (e.g. chart data loading). */
+    disabled?: boolean;
 }
-export declare function InteractionOverlay({ className, children, message, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractionOverlay({ className, children, message, disabled, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -21,6 +21,10 @@ export interface ChatContextType {
      * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
      */
     outboundPendingByKey: Readonly<Record<string, number>>;
+    /** Ref-count of chat panels reporting UI busy (outbound wait, preset scripts, etc.). */
+    panelBusyCount: number;
+    acquirePanelBusy: () => void;
+    releasePanelBusy: () => void;
 }
 declare const ChatContext: import("react").Context<ChatContextType>;
 /** Stable composite key; avoids collisions if `scopeId` contains `:`. */
@@ -36,6 +40,10 @@ export declare const isChatEmpty: (chat: Chat | null) => boolean;
 export declare function useChats(): ChatContextType;
 export declare function useChat(scopeId: string | undefined, chatId: string | undefined): Chat | null;
 export declare function useChatOutboundPending(scopeId: string | undefined | null, chatSessionId: string | null | undefined): boolean;
+/** True when chat is waiting on API or panel UI busy (safe outside ChatProvider). */
+export declare function useIsChatLoading(): boolean;
+/** Syncs chat panel `isLoading` into context for touch-overlay suppression. */
+export declare function useSyncChatPanelBusy(isLoading: boolean): void;
 export declare function useChatsForScopeId(scopeId: string): {
     chats: Chat[];
     currentChat: Chat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.18",
+  "version": "1.3.19",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -231,7 +231,10 @@ export function ChartAreaInteractive({
   };
 
   return (
-    <InteractionOverlay className={cn(className, loading && S.loading)}>
+    <InteractionOverlay
+      className={cn(className, loading && S.loading)}
+      disabled={loading}
+    >
       {(!disableTimeRangeSelector || headerActions) && (
         <div className={S.chartHeaderContainer}>
           {!disableTimeRangeSelector && (

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -32,6 +32,7 @@ import {
   useChat,
   useChatOutboundPending,
   useChatsForScopeId,
+  useSyncChatPanelBusy,
 } from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
@@ -144,6 +145,7 @@ export function useChatPanelChromeModel({
     currentChatId,
   );
   const isLoading = isOutboundPending || localUiBusy;
+  useSyncChatPanelBusy(isLoading);
 
   const {
     searchParams,

package/src/components/ui/InteractionOverlay/InteractionOverlay.styl

@@ -11,13 +11,28 @@
   cursor pointer
   touch-action manipulation
   background transparent
-  box-shadow inset 0 0 80px 40px var(--overlay-background-color)
-  transition box-shadow 200ms ease-out
+
+  &::before
+    content ''
+    position absolute
+    top calc(-1 * var(--p-2))
+    right calc(-1 * var(--p-2))
+    bottom calc(-1 * var(--p-2))
+    left calc(-1 * var(--p-2))
+    background-color unquote('color-mix(in srgb, var(--overlay-background-color) 70%, transparent)')
+    box-shadow inset 0 0 80px 40px var(--overlay-background-color)
+    pointer-events none
+    z-index -1
+    transition 200ms ease-out
+    transition-property box-shadow, background-color
 
   .hidden &
-    box-shadow inset 0 0 0 0 var(--overlay-background-color)
     pointer-events none
 
+    &::before
+      box-shadow inset 0 0 0 0 var(--overlay-background-color)
+      background-color transparent
+
 .message
   position absolute
   top 50%

package/src/components/ui/InteractionOverlay/InteractionOverlay.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 
+import { useIsChatLoading } from '#uilib/contexts/chat-context';
 import { useIsTouchDevice } from '#uilib/hooks/useIsTouchDevice';
 
 import S from './InteractionOverlay.styl';
@@ -9,14 +10,19 @@ interface InteractionOverlayProps {
   className?: string;
   children?: React.ReactNode;
   message?: string;
+  /** When true, hides the touch overlay (e.g. chart data loading). */
+  disabled?: boolean;
 }
 
 export function InteractionOverlay({
   className,
   children,
   message = 'Touch to interact',
+  disabled = false,
 }: InteractionOverlayProps) {
   const isTouchDevice = useIsTouchDevice();
+  const isChatLoading = useIsChatLoading();
+  const suppressOverlay = disabled || isChatLoading;
   const [isVisible, setIsVisible] = useState(true);
 
   const handleClick = useCallback(() => {
@@ -24,13 +30,13 @@ export function InteractionOverlay({
   }, []);
 
   useEffect(() => {
-    if (isTouchDevice) {
+    if (isTouchDevice && !suppressOverlay) {
       setIsVisible(true);
     }
-  }, [isTouchDevice]);
+  }, [isTouchDevice, suppressOverlay]);
 
   useEffect(() => {
-    if (!isTouchDevice) return;
+    if (!isTouchDevice || suppressOverlay) return;
 
     const handleScroll = () => {
       setIsVisible(true);
@@ -40,14 +46,20 @@ export function InteractionOverlay({
     return () => {
       document.removeEventListener('scroll', handleScroll, { capture: true });
     };
-  }, [isTouchDevice]);
+  }, [isTouchDevice, suppressOverlay]);
 
   if (!isTouchDevice) {
     return <>{children}</>;
   }
 
   return (
-    <div className={cn(S.root, !isVisible && S.hidden, className)}>
+    <div
+      className={cn(
+        S.root,
+        (!isVisible || suppressOverlay) && S.hidden,
+        className,
+      )}
+    >
       {children}
       <button
         type="button"

package/src/contexts/chat-context.tsx

@@ -66,6 +66,10 @@ export interface ChatContextType {
    * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
    */
   outboundPendingByKey: Readonly<Record<string, number>>;
+  /** Ref-count of chat panels reporting UI busy (outbound wait, preset scripts, etc.). */
+  panelBusyCount: number;
+  acquirePanelBusy: () => void;
+  releasePanelBusy: () => void;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
@@ -175,6 +179,15 @@ export function ChatProvider({
   const [outboundPendingByKey, setOutboundPendingByKey] = useState<
     Record<string, number>
   >({});
+  const [panelBusyCount, setPanelBusyCount] = useState(0);
+
+  const acquirePanelBusy = useCallback(() => {
+    setPanelBusyCount(count => count + 1);
+  }, []);
+
+  const releasePanelBusy = useCallback(() => {
+    setPanelBusyCount(count => Math.max(0, count - 1));
+  }, []);
 
   const beginOutboundPending = useCallback(
     (scopeId: string, chatSessionId: string) => {
@@ -444,6 +457,7 @@ export function ChatProvider({
       setChats({});
       setCurrentChatIdState({});
       setOutboundPendingByKey({});
+      setPanelBusyCount(0);
       return;
     }
 
@@ -475,6 +489,9 @@ export function ChatProvider({
         getCurrentChatId,
         deleteChat,
         outboundPendingByKey,
+        panelBusyCount,
+        acquirePanelBusy,
+        releasePanelBusy,
       }}
     >
       {children}
@@ -519,6 +536,31 @@ export function useChatOutboundPending(
   }, [scopeId, chatSessionId, outboundPendingByKey]);
 }
 
+/** True when chat is waiting on API or panel UI busy (safe outside ChatProvider). */
+export function useIsChatLoading(): boolean {
+  const context = useContext(ChatContext);
+  return useMemo(() => {
+    if (!context) return false;
+    const outboundPending = Object.values(context.outboundPendingByKey).some(
+      count => count > 0,
+    );
+    return outboundPending || context.panelBusyCount > 0;
+  }, [context?.outboundPendingByKey, context?.panelBusyCount]);
+}
+
+/** Syncs chat panel `isLoading` into context for touch-overlay suppression. */
+export function useSyncChatPanelBusy(isLoading: boolean): void {
+  const acquirePanelBusy = useContext(ChatContext)?.acquirePanelBusy;
+  const releasePanelBusy = useContext(ChatContext)?.releasePanelBusy;
+  useEffect(() => {
+    if (!isLoading || !acquirePanelBusy || !releasePanelBusy) return;
+    acquirePanelBusy();
+    return () => {
+      releasePanelBusy();
+    };
+  }, [isLoading, acquirePanelBusy, releasePanelBusy]);
+}
+
 export function useChatsForScopeId(scopeId: string) {
   const {
     getChatsForScopeId,

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -6,7 +6,9 @@ import type {
   OverlayMode,
 } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { Label } from '#uilib/components/ui/Label';
 import { PageContentSection } from '#uilib/components/ui/Page';
+import { Switch } from '#uilib/components/ui/Switch';
 import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
 import { useTheme } from '#uilib/contexts/theme-context';
 import type { ForecastData } from '#uilib/types/forecast-data';
@@ -102,6 +104,7 @@ export default function ChartAreaInteractivePage() {
     string | null
   >('0.9');
   const [upperThreshold, setUpperThreshold] = useState(15);
+  const [loading, setLoading] = useState(false);
 
   const toggleLegendSeries = useCallback((key: string) => {
     setHidden(prev => {
@@ -155,6 +158,21 @@ export default function ChartAreaInteractivePage() {
             <TabsTrigger value="thresholds">Thresholds</TabsTrigger>
           </TabsList>
         </Tabs>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            marginBottom: 16,
+          }}
+        >
+          <Switch
+            id="chart-loading"
+            checked={loading}
+            onCheckedChange={setLoading}
+          />
+          <Label htmlFor="chart-loading">Loading</Label>
+        </div>
         <ChartAreaInteractive
           timeRange={timeRange}
           onTimeRangeChange={setTimeRange}
@@ -163,7 +181,7 @@ export default function ChartAreaInteractivePage() {
           mode={mode}
           chartData={chartData}
           forecastData={DEMO_FORECAST_ITEMS}
-          loading={false}
+          loading={loading}
           isDarkTheme={isDarkMode}
           toggleLegendSeries={toggleLegendSeries}
           ensureAnalysisSeriesVisible={ensureAnalysisSeriesVisible}