@flamingo-stack/openframe-frontend-core 0.0.276 → 0.0.277

package/src/components/chat/chat-container.tsx

@@ -6,6 +6,7 @@ import { PlusCircleIcon } from "../plus-circle-icon"
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon"
 import { Chevron02LeftIcon } from "../icons-v2-generated"
 import { TicketStatusTag, resolveStatusTagProps } from "../ui/ticket-status-tag"
+import { Skeleton } from "../ui/skeleton"
 import type { ConnectionIndicatorProps, ChatContainerProps, ChatHeaderProps } from "./types"
 
 const ConnectionIndicator: React.FC<ConnectionIndicatorProps> = ({ status }) => {
@@ -62,7 +63,7 @@ const ChatContainer = React.forwardRef<HTMLDivElement, ChatContainerProps>(
 ChatContainer.displayName = "ChatContainer"
 
 const ChatHeader = React.forwardRef<HTMLDivElement, ChatHeaderProps>(
-  ({ className, userName = 'Grace "Fae" Meadows', userTitle = "Your Personal Assistant", userAvatar, userIcon, onSettingsClick, onNewChat, onClose, onBack, showNewChat = false, connectionStatus = 'disconnected', serverUrl = null, headerActions, ticketInfo, fullWidth = false, bare = false, ...props }, ref) => {
+  ({ className, userName = 'Grace "Fae" Meadows', userTitle = "Your Personal Assistant", userAvatar, userIcon, onSettingsClick, onNewChat, onClose, onBack, showNewChat = false, connectionStatus = 'disconnected', serverUrl = null, headerActions, ticketInfo, fullWidth = false, bare = false, isLoading = false, ...props }, ref) => {
     const cardClasses = bare
       ? ""
       : "rounded-md bg-ods-card border border-ods-border"
@@ -93,33 +94,47 @@ const ChatHeader = React.forwardRef<HTMLDivElement, ChatHeaderProps>(
         )}
         <div className={cardClasses}>
           <div className="flex items-center justify-between gap-4 px-4 py-3">
-            <div className="flex items-center gap-3">
-              {userIcon ? (
-                <div className="flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent">
-                  {userIcon}
+            {isLoading ? (
+              <div className="flex items-center gap-3">
+                {/* 64px round avatar placeholder — matches the `w-16 h-16`
+                    rounded-full avatar / userIcon block below. */}
+                <Skeleton className="w-16 h-16 rounded-full shrink-0" />
+                <div className="flex flex-col gap-1">
+                  {/* Name line — sized to the `text-h3` name. */}
+                  <Skeleton className="h-6 w-40" />
+                  {/* Server line — sized to the `text-h4` secondary row. */}
+                  <Skeleton className="h-4 w-28" />
                 </div>
-              ) : (
-                <Avatar
-                  src={userAvatar}
-                  alt={userName}
-                  fallback={userName}
-                  size="xl"
-                  variant="round"
-                  className="bg-ods-flamingo-pink"
-                />
-              )}
-              <div className="flex flex-col">
-                <span className="text-h3">{userName}</span>
-                <div className="flex items-center gap-2">
-                  {serverUrl && (
-                    <>
-                      <span className="text-h4 text-ods-text-secondary">{serverUrl}</span>
-                      <ConnectionIndicator status={connectionStatus} />
-                    </>
-                  )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                {userIcon ? (
+                  <div className="flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent">
+                    {userIcon}
+                  </div>
+                ) : (
+                  <Avatar
+                    src={userAvatar}
+                    alt={userName}
+                    fallback={userName}
+                    size="xl"
+                    variant="round"
+                    className="bg-ods-flamingo-pink"
+                  />
+                )}
+                <div className="flex flex-col">
+                  <span className="text-h3">{userName}</span>
+                  <div className="flex items-center gap-2">
+                    {serverUrl && (
+                      <>
+                        <span className="text-h4 text-ods-text-secondary">{serverUrl}</span>
+                        <ConnectionIndicator status={connectionStatus} />
+                      </>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
+            )}
             <div className="flex items-center gap-1">
               {showNewChat && onNewChat && (
                 <Button

package/src/components/chat/types/component.types.ts

@@ -77,6 +77,17 @@ export interface ChatHeaderProps extends HTMLAttributes<HTMLDivElement> {
    * Default `false` — preserves the existing card look.
    */
   bare?: boolean
+  /**
+   * Render a skeleton placeholder in place of the user identity row
+   * (avatar/icon + name + server line) while the host is still
+   * resolving the assistant/connection data. The skeleton blocks match
+   * the real layout's dimensions (64px round avatar, `text-h3` name,
+   * `text-h4` server line) so there is no layout shift when the content
+   * swaps in.
+   *
+   * Default `false` — renders the resolved identity row.
+   */
+  isLoading?: boolean
 }
 
 // ========== Connection Indicator Props ==========