@almadar/std 16.237.0 → 16.238.0

package/behaviors/lolo/ui/avl/atoms/ui-behavior-view.lolo

@@ -72,6 +72,20 @@ orbital BehaviorViewOrbital {
       INIT -> idle
         (render-ui main {
           data: @config.data
+          aria-label: @config.ariaLabel
+          aria-labelledby: @config.ariaLabelledby
+          aria-describedby: @config.ariaDescribedby
+          aria-live: @config.ariaLive
+          aria-current: @config.ariaCurrent
+          aria-pressed: @config.ariaPressed
+          aria-expanded: @config.ariaExpanded
+          aria-selected: @config.ariaSelected
+          aria-hidden: @config.ariaHidden
+          aria-busy: @config.ariaBusy
+          role: @config.role
+          lang: @config.lang
+          dir: @config.dir
+          tabIndex: @config.tabIndex
           type: behavior-view
         })
     }
@@ -81,6 +95,72 @@ orbital BehaviorViewOrbital {
         @label "Data"
         @description "The orbital to summarize."
         @tier "presentation"
+      ariaLabel : string
+        @label "Aria-label"
+        @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."
+        @synonyms "aria-label"
+        @tier "presentation"
+      ariaLabelledby : string
+        @label "Aria-labelledby"
+        @description "Id of the element whose text names this one."
+        @synonyms "aria-labelledby"
+        @tier "presentation"
+      ariaDescribedby : string
+        @label "Aria-describedby"
+        @description "Id of the element whose text describes this one (help text, error)."
+        @synonyms "aria-describedby"
+        @tier "presentation"
+      ariaLive : "off" | "polite" | "assertive"
+        @label "Aria-live"
+        @description "Announce changes to this region: polite waits for a pause, assertive interrupts."
+        @synonyms "aria-live"
+        @tier "presentation"
+      ariaCurrent : "page" | "step" | "location" | "date" | "time" | "true" | "false"
+        @label "Aria-current"
+        @description "Marks the current item in a set: the current page, step, location, date or time."
+        @synonyms "aria-current"
+        @tier "presentation"
+      ariaPressed : "true" | "false" | "mixed"
+        @label "Aria-pressed"
+        @description "Toggle-button state."
+        @synonyms "aria-pressed"
+        @tier "presentation"
+      ariaExpanded : boolean
+        @label "Aria-expanded"
+        @description "Whether the element it controls is expanded."
+        @synonyms "aria-expanded"
+        @tier "presentation"
+      ariaSelected : boolean
+        @label "Aria-selected"
+        @description "Whether this item is selected (tabs, options, grid cells)."
+        @synonyms "aria-selected"
+        @tier "presentation"
+      ariaHidden : boolean
+        @label "Aria-hidden"
+        @description "Hide from assistive technology (decorative content only)."
+        @synonyms "aria-hidden"
+        @tier "presentation"
+      ariaBusy : boolean
+        @label "Aria-busy"
+        @description "This region is updating; assistive technology waits before announcing it."
+        @synonyms "aria-busy"
+        @tier "presentation"
+      role : "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"
+        @label "Role"
+        @description "WAI-ARIA role when the element's native semantics don't describe it."
+        @tier "presentation"
+      lang : string
+        @label "Lang"
+        @description "Language of this element's content (BCP 47, e.g. ar, sl, en)."
+        @tier "presentation"
+      dir : "ltr" | "rtl" | "auto"
+        @label "Dir"
+        @description "Text direction of this element's content."
+        @tier "presentation"
+      tabIndex : number
+        @label "Tab Index"
+        @description "0 puts the element in the Tab order; -1 makes it focusable only programmatically."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/avl/atoms/ui-module-card.lolo

@@ -73,6 +73,20 @@ orbital ModuleCardOrbital {
       INIT -> idle
         (render-ui main {
           data: @config.data
+          aria-label: @config.ariaLabel
+          aria-labelledby: @config.ariaLabelledby
+          aria-describedby: @config.ariaDescribedby
+          aria-live: @config.ariaLive
+          aria-current: @config.ariaCurrent
+          aria-pressed: @config.ariaPressed
+          aria-expanded: @config.ariaExpanded
+          aria-selected: @config.ariaSelected
+          aria-hidden: @config.ariaHidden
+          aria-busy: @config.ariaBusy
+          role: @config.role
+          lang: @config.lang
+          dir: @config.dir
+          tabIndex: @config.tabIndex
           type: module-card
         })
     }
@@ -82,6 +96,72 @@ orbital ModuleCardOrbital {
         @label "Data"
         @description "The orbital to summarize."
         @tier "presentation"
+      ariaLabel : string
+        @label "Aria-label"
+        @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."
+        @synonyms "aria-label"
+        @tier "presentation"
+      ariaLabelledby : string
+        @label "Aria-labelledby"
+        @description "Id of the element whose text names this one."
+        @synonyms "aria-labelledby"
+        @tier "presentation"
+      ariaDescribedby : string
+        @label "Aria-describedby"
+        @description "Id of the element whose text describes this one (help text, error)."
+        @synonyms "aria-describedby"
+        @tier "presentation"
+      ariaLive : "off" | "polite" | "assertive"
+        @label "Aria-live"
+        @description "Announce changes to this region: polite waits for a pause, assertive interrupts."
+        @synonyms "aria-live"
+        @tier "presentation"
+      ariaCurrent : "page" | "step" | "location" | "date" | "time" | "true" | "false"
+        @label "Aria-current"
+        @description "Marks the current item in a set: the current page, step, location, date or time."
+        @synonyms "aria-current"
+        @tier "presentation"
+      ariaPressed : "true" | "false" | "mixed"
+        @label "Aria-pressed"
+        @description "Toggle-button state."
+        @synonyms "aria-pressed"
+        @tier "presentation"
+      ariaExpanded : boolean
+        @label "Aria-expanded"
+        @description "Whether the element it controls is expanded."
+        @synonyms "aria-expanded"
+        @tier "presentation"
+      ariaSelected : boolean
+        @label "Aria-selected"
+        @description "Whether this item is selected (tabs, options, grid cells)."
+        @synonyms "aria-selected"
+        @tier "presentation"
+      ariaHidden : boolean
+        @label "Aria-hidden"
+        @description "Hide from assistive technology (decorative content only)."
+        @synonyms "aria-hidden"
+        @tier "presentation"
+      ariaBusy : boolean
+        @label "Aria-busy"
+        @description "This region is updating; assistive technology waits before announcing it."
+        @synonyms "aria-busy"
+        @tier "presentation"
+      role : "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"
+        @label "Role"
+        @description "WAI-ARIA role when the element's native semantics don't describe it."
+        @tier "presentation"
+      lang : string
+        @label "Lang"
+        @description "Language of this element's content (BCP 47, e.g. ar, sl, en)."
+        @tier "presentation"
+      dir : "ltr" | "rtl" | "auto"
+        @label "Dir"
+        @description "Text direction of this element's content."
+        @tier "presentation"
+      tabIndex : number
+        @label "Tab Index"
+        @description "0 puts the element in the Tab order; -1 makes it focusable only programmatically."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/core/atoms/std-billable-hour.lolo

@@ -52,17 +52,10 @@ orbital BillableHourOrbital {
           emit: { failure: BillableHourLoadFailed, success: BillableHourLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading time entries…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: table, rows: 6 }]
         })
       BillableHourLoaded -> browsing
         (render-ui main {
@@ -239,17 +232,10 @@ orbital BillableHourOrbital {
           emit: { failure: BillableHourLoadFailed, success: BillableHourLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading time entries…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: table, rows: 6 }]
         })
       INVOICE_HOURS -> loading
         (set @entity.id ?id)
@@ -294,7 +280,12 @@ orbital BillableHourOrbital {
         (fetch BillableHour {
           emit: { failure: BillableHourLoadFailed, success: BillableHourLoaded }
         })
-        (render-ui main { size: sm, type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: table, rows: 6 }]
+        })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-board.lolo

@@ -45,10 +45,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Loading board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       BoardItemsLoaded -> viewing_board
         (set @entity.boards (array/map @config.columns (fn col {
           count: (array/len (array/filter ?data (fn item ["=", (object/get @item @config.groupByField), (object/get @col key)])))
@@ -76,10 +73,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Refreshing board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       ;; Same refresh, different contract: a delete emits { id, deleted }, not
       ;; the row, so it cannot ride BoardItemsSaved's payload.
       BoardItemDeleted -> loading
@@ -87,10 +81,6 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Refreshing board…"
-          type: loading-state
-        })
       BoardItemsSaveFailed -> error
         (set @entity.errorMessage ?error)
         (render-ui main {
@@ -106,10 +96,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Loading board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       OPEN_CARD -> viewing_card
         (set @entity.currentId ?id)
         (set @entity.currentTitle ?title)
@@ -291,10 +278,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Refreshing board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       MOVE_CARD -> loading
         (persist update BoardView { id: ?id, stage: ?targetGroup } {
           emit: { failure: BoardItemsSaveFailed, success: BoardItemsSaved }
@@ -307,10 +291,6 @@ orbital BoardOrbital {
         (persist delete BoardView ?id {
           emit: { failure: BoardItemsSaveFailed, success: BoardItemDeleted }
         })
-        (render-ui main {
-          title: "Deleting item…"
-          type: loading-state
-        })
     }
 
     state adding {
@@ -318,10 +298,6 @@ orbital BoardOrbital {
         (persist create BoardView ?data {
           emit: { failure: BoardItemsSaveFailed, success: BoardItemsSaved }
         })
-        (render-ui main {
-          title: "Saving…"
-          type: loading-state
-        })
       CANCEL_ADD -> viewing_board
         (render-ui main {
           title: "Cancelling…"
@@ -331,10 +307,7 @@ orbital BoardOrbital {
 
     state error {
       INIT -> loading
-        (render-ui main {
-          title: "Retrying…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-book-reader.lolo

@@ -258,7 +258,8 @@ orbital BookReaderOrbital {
                   label: (object/get @chapter title "")
                   action: OPEN_CHAPTER
                   actionPayload: { index: @index }
-                  className: (if (== @index @entity.chapterIndex) "text-foreground font-semibold" "")
+                  aria-current: (if (== @index @entity.chapterIndex) "page" "false")
+                  className: (if (== @index @entity.chapterIndex) "h-auto justify-start text-start text-foreground font-semibold" "h-auto justify-start text-start")
                 }))
               }]
             }, {
@@ -266,16 +267,23 @@ orbital BookReaderOrbital {
               direction: vertical
               gap: lg
               children: [{
-                type: typography
-                content: @entity.progressLabel
-                variant: caption
-                color: muted
-              }, {
-                type: typography
-                content: @entity.chapterTitle
-                variant: h2
-                weight: bold
-                className: "tracking-tight"
+                type: stack
+                direction: vertical
+                gap: lg
+                role: status
+                children: [{
+                  type: typography
+                  content: @entity.progressLabel
+                  variant: caption
+                  color: muted
+                }, {
+                  type: typography
+                  content: @entity.chapterTitle
+                  variant: h1
+                  size: "3xl"
+                  weight: bold
+                  className: "tracking-tight"
+                }]
               }, {
                 type: markdown-content
                 content: @entity.chapterContent

package/behaviors/lolo/ui/core/atoms/std-browse.lolo

@@ -70,7 +70,11 @@ orbital BrowseItemOrbital {
           limit: @config.pageSize
           offset: 0
         })
-        (render-ui main { rows: 4, type: skeleton })
+        (if ["=", @config.browseLook, gallery]
+          (render-ui main { type: skeleton, variant: grid, rows: 6 })
+          (if (or ["=", @config.browseLook, feed] ["=", @config.browseLook, master-detail] ["=", @config.browseLook, triage])
+            (render-ui main { type: skeleton, variant: list, rows: 6 })
+            (render-ui main { type: skeleton, variant: table, rows: 6 })))
       BrowseItemLoaded -> browsing
         (if ["=", @config.browseLook, dense]
           (render-ui main @config.denseBodyContent)
@@ -165,7 +169,11 @@ orbital BrowseItemOrbital {
           limit: @config.pageSize
           offset: 0
         })
-        (render-ui main { rows: 4, type: skeleton })
+        (if ["=", @config.browseLook, gallery]
+          (render-ui main { type: skeleton, variant: grid, rows: 6 })
+          (if (or ["=", @config.browseLook, feed] ["=", @config.browseLook, master-detail] ["=", @config.browseLook, triage])
+            (render-ui main { type: skeleton, variant: list, rows: 6 })
+            (render-ui main { type: skeleton, variant: table, rows: 6 })))
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-calendar.lolo

@@ -31,19 +31,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading calendar…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
-          type: stack
-        })
+        (render-ui main { type: skeleton, variant: card })
       CalendarEventLoaded -> month-view
         (if ["=", @config.calendarLook, agenda-list]
           (render-ui main @config.agendaListBodyContent)
@@ -87,7 +75,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main { type: spinner })
+        (render-ui main { type: skeleton, variant: card })
       SELECT_DAY -> loading
         (set @entity.selectedRange ?value)
         ;; filter reads the candidate ROW's configured start column — never a
@@ -133,7 +121,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main { type: spinner })
+        (render-ui main { type: skeleton, variant: card })
       ;; the error screen's Retry button: INIT is lifecycle-only and the bus never
       ;; delivers it, so the affordance must target a first-class user event
       RETRY -> loading
@@ -141,7 +129,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main { type: spinner })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-detail-layout.lolo

@@ -1,5 +1,5 @@
 app std-detail-layout "1.0.0"
-"std-detail-layout — detail-page chrome band (back button + navigation-stack breadcrumb trail) above a single contentTrait slot. Use as the contentTrait of a detail page's AppShell binding: the band renders `← Back | Contracts › Contract details` from the orbital-scoped client navigation stack (session history, seeded from declared page-path ancestry on cold loads — the trail is never empty), and the consumer's detail trait renders below it. Back pops the stack; crumb clicks navigate to their level; a list router's `(navigate path payload { crumb: ?row.title })` labels the detail crumb with the real record title. Bind once per detail page — `XDetailLayout = DetailShell.traits.DetailLayout` with `contentTrait: @trait.XDetail`."
+"std-detail-layout — detail-page chrome band (back button + navigation-stack breadcrumb trail) above a single contentTrait slot. Use as the contentTrait of a detail page's AppShell binding: the band renders `Contracts › Contract details` (phones: `← Back`) from the orbital-scoped client navigation stack (session history, seeded from declared page-path ancestry on cold loads — the trail is never empty), and the consumer's detail trait renders below it. Back pops the stack; crumb clicks navigate to their level; a list router's `(navigate path payload { crumb: ?row.title })` labels the detail crumb with the real record title. Bind once per detail page — `XDetailLayout = DetailShell.traits.DetailLayout` with `contentTrait: @trait.XDetail`."
 ;; @capabilities "detail page shell, breadcrumb trail, back navigation, record detail chrome, navigation stack, drill-down hierarchy"
 orbital DetailLayoutOrbital {
   entity DetailLayoutData [runtime] {
@@ -29,10 +29,12 @@ orbital DetailLayoutOrbital {
               icon: arrow-left
               label: @config.backLabel
               action: BACK
+              className: "md:hidden"
             }, {
               type: breadcrumb
               fromNavStack: true
               itemEvent: CRUMB_NAV
+              className: "hidden md:flex"
             }]
           },
           @config.contentTrait]

package/behaviors/lolo/ui/core/atoms/std-esign-flow.lolo

@@ -37,17 +37,10 @@ orbital SignatureSessionOrbital {
           emit: { failure: SignatureSessionLoadFailed, success: SignatureSessionLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading signature requests…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
         })
       SignatureSessionLoaded -> browsing
         (render-ui main {
@@ -139,7 +132,12 @@ orbital SignatureSessionOrbital {
         (fetch SignatureSession {
           emit: { failure: SignatureSessionLoadFailed, success: SignatureSessionLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
+        })
     }
 
     state error {
@@ -147,14 +145,24 @@ orbital SignatureSessionOrbital {
         (fetch SignatureSession {
           emit: { failure: SignatureSessionLoadFailed, success: SignatureSessionLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
+        })
       ;; the error screen's Retry button: INIT is lifecycle-only and the bus never
       ;; delivers it, so the affordance must target a first-class user event
       RETRY -> loading
         (fetch SignatureSession {
           emit: { failure: SignatureSessionLoadFailed, success: SignatureSessionLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
+        })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-esign-request.lolo

@@ -82,7 +82,12 @@ orbital ESignRequestOrbital {
         (fetch ESignRequest {
           emit: { failure: ESignRequestLoadFailed, success: ESignRequestLoaded }
         })
-        (render-ui main { size: md, type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
+        })
       ESignRequestLoaded -> browsing
         (render-ui main {
           children: [@trait.TitleHeading, @trait.RequestDataGrid]
@@ -111,7 +116,12 @@ orbital ESignRequestOrbital {
         (fetch ESignRequest {
           emit: { failure: ESignRequestLoadFailed, success: ESignRequestLoaded }
         })
-        (render-ui main { size: md, type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
+        })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-event-log.lolo

@@ -44,8 +44,10 @@ orbital EventLogOrbital {
           emit: { failure: EventLogLoadFailed, success: EventLogLoaded }
         })
         (render-ui main {
-          title: "Loading activity…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
         })
       EventLogLoaded -> viewing
         (set @entity.filterChips (array/prepend (array/map @config.kindOptions (fn k {
@@ -151,8 +153,10 @@ orbital EventLogOrbital {
           emit: { failure: EventLogLoadFailed, success: EventLogLoaded }
         })
         (render-ui main {
-          title: "Refreshing…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
         })
       EventLogSaveFailed -> error
         (set @entity.errorMessage ?error)
@@ -403,10 +407,6 @@ orbital EventLogOrbital {
         (persist create EventLogView ?data {
           emit: { failure: EventLogSaveFailed, success: EventLogSaved }
         })
-        (render-ui main {
-          title: "Saving entry…"
-          type: loading-state
-        })
       CANCEL_BACKFILL -> viewing
         (render-ui main {
           children: [{
@@ -479,8 +479,10 @@ orbital EventLogOrbital {
     state error {
       INIT -> loading
         (render-ui main {
-          title: "Retrying…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
         })
     }