termcast 1.3.30 → 1.3.32

package/src/components/list.tsx

@@ -4,7 +4,7 @@ import {
   TextAttributes,
   TextareaRenderable,
 } from '@opentui/core'
-import { useKeyboard } from '@opentui/react'
+import { useKeyboard, flushSync } from '@opentui/react'
 import React, {
     ReactElement,
     ReactNode,
@@ -17,6 +17,7 @@ import React, {
     useState
 } from 'react'
 import { LoadingBar } from 'termcast/src/components/loading-bar'
+import { Footer } from 'termcast/src/components/footer'
 import { createDescendants } from 'termcast/src/descendants'
 import { useStore } from 'termcast/src/state'
 import { useDialog } from 'termcast/src/internal/dialog'
@@ -27,6 +28,7 @@ import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
 import { Color, resolveColor } from 'termcast/src/colors'
 import { getIconEmoji } from 'termcast/src/components/icon'
+import { ActionPanel } from 'termcast/src/components/actions'
 import { Theme, markdownSyntaxStyle } from 'termcast/src/theme'
 import { CommonProps } from 'termcast/src/utils'
 
@@ -71,44 +73,35 @@ interface ActionsInterface {
 function ListFooter(): any {
   const firstActionTitle = useStore((s) => s.firstActionTitle)
   const hasToast = useStore((s) => s.toast !== null)
+  const listContext = useContext(ListContext)
+  const isShowingDetail = listContext?.isShowingDetail ?? false
 
   const content = hasToast ? null : (
-    <>
+    <box style={{ flexDirection: 'row', gap: 3 }}>
       {firstActionTitle && (
-        <>
-          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <box style={{ flexDirection: 'row', gap: 1 }}>
+          <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
             ↵
           </text>
-          <text fg={Theme.textMuted}> {firstActionTitle.toLowerCase()}</text>
-        </>
+          <text flexShrink={0} fg={Theme.textMuted}>{firstActionTitle.toLowerCase()}</text>
+        </box>
       )}
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'  '}↑↓
-      </text>
-      <text fg={Theme.textMuted}> navigate</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'  '}^k
-      </text>
-      <text fg={Theme.textMuted}> actions</text>
-    </>
-  )
-
-  return (
-    <box
-      border={false}
-      height={1}
-      style={{
-        paddingLeft: 1,
-        flexShrink: 0,
-        paddingRight: 1,
-        paddingTop: 1,
-        marginTop: 1,
-        flexDirection: 'row',
-      }}
-    >
-      {content}
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          ↑↓
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>navigate</text>
+      </box>
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          ^k
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>actions</text>
+      </box>
     </box>
   )
+
+  return <Footer hidePoweredBy={isShowingDetail}>{content}</Footer>
 }
 
 interface NavigationChildInterface {
@@ -350,6 +343,8 @@ const {
   DescendantsProvider: ListDescendantsProvider,
   useDescendants: useListDescendants,
   useDescendant: useListItemDescendant,
+  useDescendantsRerender: useListDescendantsRerender,
+  useDescendantsMap: useListDescendantsMap,
 } = createDescendants<ListItemDescendant>()
 
 // Create descendants for Dropdown items
@@ -395,8 +390,10 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
 
   // Wrapper function that updates search text
   const setSearchText = (value: string) => {
-    setSearchTextRaw(value)
-    // TODO: use flushSync when available to force descendants to update visibility
+    // Using flushSync to force descendants to update visibility before querying
+    flushSync(() => {
+      setSearchTextRaw(value)
+    })
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1 && item.props?.visible !== false)
       .sort((a, b) => a.index - b.index)
@@ -472,13 +469,15 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
                 justifyContent: 'space-between',
               }}
             >
-              <text attributes={TextAttributes.BOLD}>{props.tooltip}</text>
-              <text fg={Theme.textMuted}>esc</text>
+              <text flexShrink={0} fg={Theme.textMuted}>{props.tooltip}</text>
+              <text flexShrink={0} fg={Theme.textMuted}>esc</text>
             </box>
-            <box style={{ paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ paddingTop: 1, paddingBottom: 1, flexDirection: 'row' }}>
+              <text flexShrink={0} fg={Theme.textMuted}>&gt; </text>
               <textarea
                 ref={inputRef}
                 height={1}
+                flexGrow={1}
                 wrapMode='none'
                 keyBindings={[
                   { name: 'return', action: 'submit' },
@@ -518,7 +517,7 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
           </box>
           {props.isLoading && (
             <box style={{ paddingLeft: 1 }}>
-              <text fg={Theme.textMuted}>Loading...</text>
+              <text flexShrink={0} fg={Theme.textMuted}>Loading...</text>
             </box>
           )}
         </box>
@@ -533,32 +532,26 @@ function DropdownFooter(): any {
   const hasToast = useStore((s) => s.toast !== null)
 
   const content = hasToast ? null : (
-    <>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        ↵
-      </text>
-      <text fg={Theme.textMuted}> select</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}↑↓
-      </text>
-      <text fg={Theme.textMuted}> navigate</text>
-    </>
+    <box style={{ flexDirection: 'row', gap: 3 }}>
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          ↵
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>select</text>
+      </box>
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          ↑↓
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>navigate</text>
+      </box>
+    </box>
   )
 
   return (
-    <box
-      border={false}
-      height={1}
-      style={{
-        paddingRight: 2,
-        paddingLeft: 3,
-        paddingBottom: 1,
-        paddingTop: 1,
-        flexDirection: 'row',
-      }}
-    >
+    <Footer paddingLeft={3} paddingRight={2} paddingBottom={1} marginTop={0}>
       {content}
-    </box>
+    </Footer>
   )
 }
 
@@ -592,6 +585,7 @@ function ListItemRow(props: {
           accessoryElements.push(
             <text
               key={`text-${textValue}`}
+              flexShrink={0}
               fg={active ? Theme.background : resolveColor(textColor) || Theme.info}
               wrapMode="none"
             >
@@ -611,6 +605,7 @@ function ListItemRow(props: {
           accessoryElements.push(
             <text
               key={`tag-${tagValue}`}
+              flexShrink={0}
               fg={active ? Theme.background : resolveColor(tagColor) || Theme.warning}
               wrapMode="none"
             >
@@ -633,6 +628,7 @@ function ListItemRow(props: {
           accessoryElements.push(
             <text
               key={`date-${dateValue.getTime()}`}
+              flexShrink={0}
               fg={active ? Theme.background : resolveColor(dateColor) || Theme.success}
               wrapMode="none"
             >
@@ -670,9 +666,10 @@ function ListItemRow(props: {
     >
       <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }}>
         <box style={{ flexDirection: 'row', flexShrink: 0 }}>
-          <text fg={active ? Theme.background : Theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
-          {icon && <text fg={active ? Theme.background : iconColor || Theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
+          <text flexShrink={0} fg={active ? Theme.background : Theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
+          {icon && <text flexShrink={0} fg={active ? Theme.background : iconColor || Theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
           <text
+            flexShrink={0}
             fg={active ? Theme.background : Theme.text}
             attributes={active ? TextAttributes.BOLD : undefined}
             selectable={false}
@@ -683,6 +680,7 @@ function ListItemRow(props: {
         </box>
         {subtitle && (
           <text
+            flexShrink={0}
             fg={active ? Theme.background : Theme.textMuted}
             selectable={false}
             wrapMode="none"
@@ -695,7 +693,7 @@ function ListItemRow(props: {
         <box style={{ flexDirection: 'row', flexShrink: 0 }}>
           {accessoryElements.map((elem, i) => (
             <box key={i} style={{ flexDirection: 'row' }}>
-              {i > 0 && <text> </text>}
+              {i > 0 && <text flexShrink={0}> </text>}
               {elem}
             </box>
           ))}
@@ -777,9 +775,10 @@ export const List: ListType = (props) => {
 
   // Wrapper function that updates search text
   const setInternalSearchText = (value: string) => {
-    setInternalSearchTextRaw(value)
-    // TODO: use flushSync when available to force descendants to update visibility
-    // before querying. For now, we compute visibility inline with the new search value.
+    // Using flushSync to force descendants to update visibility before querying
+    flushSync(() => {
+      setInternalSearchTextRaw(value)
+    })
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1 && item.props?.visible !== false)
       .sort((a, b) => a.index - b.index)
@@ -919,11 +918,15 @@ export const List: ListType = (props) => {
     if (evt.name === 'k' && evt.ctrl) {
       // Show current item's actions if available
       if (currentItem?.props?.actions) {
-        dialog.push(currentItem.props.actions, 'bottom-right')
+        dialog.pushActions(currentItem.props.actions)
       }
       // Otherwise show List's own actions
       else if (props.actions) {
-        dialog.push(props.actions, 'bottom-right')
+        dialog.pushActions(props.actions)
+      }
+      // Otherwise show empty ActionPanel (still has Settings section with Configure Extension, etc.)
+      else {
+        dialog.pushActions(<ActionPanel />)
       }
       return
     }
@@ -936,7 +939,7 @@ export const List: ListType = (props) => {
 
       if (currentItem.props.actions) {
         useStore.setState({ shouldAutoExecuteFirstAction: true })
-        dialog.push(currentItem.props.actions, 'bottom-right')
+        dialog.pushActions(currentItem.props.actions)
       }
     }
   })
@@ -995,13 +998,15 @@ export const List: ListType = (props) => {
               <box
                 style={{
                   flexGrow: 1,
-                  flexDirection: 'column',
+                  flexDirection: 'row',
                   flexShrink: 1,
                 }}
               >
+                <text flexShrink={0} fg={Theme.textMuted}>&gt; </text>
                 <textarea
                   ref={inputRef}
                   height={1}
+                  flexGrow={1}
                   wrapMode='none'
                   keyBindings={[
                     { name: 'return', action: 'submit' },
@@ -1026,7 +1031,7 @@ export const List: ListType = (props) => {
           {/* Main content area with optional detail view */}
           <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1 }}>
             {/* List content - render children which will register themselves */}
-            <box style={{ width: isShowingDetail ? '50%' : '100%', flexGrow: isShowingDetail ? 0 : 1, flexShrink: 1, flexDirection: 'column' }}>
+            <box style={{ width: isShowingDetail ? '50%' : '100%', flexGrow: 1, flexShrink: 1, flexDirection: 'column' }}>
               {/* Scrollable list items */}
               <ScrollBox
                 ref={scrollBoxRef}
@@ -1080,6 +1085,47 @@ export const List: ListType = (props) => {
   )
 }
 
+
+function DefaultEmptyView(): any {
+  // Subscribe to re-render when items are added/removed
+  void useListDescendantsRerender()
+  // Get live map ref for reading in useLayoutEffect
+  const map = useListDescendantsMap()
+  const [hasVisibleItems, setHasVisibleItems] = useState(true)
+
+  // We must check visibility in useLayoutEffect because:
+  // 1. map.current is cleared by reset() during render, so it's empty if read during render
+  // 2. committedMap is stale - it's a snapshot from the previous render cycle and doesn't
+  //    reflect prop changes like 'visible' (only tracks which items exist, not their props)
+  // 3. Items register in their own useLayoutEffect, so map.current is only populated after
+  //    all items' layout effects have run
+  useLayoutEffect(() => {
+    const items = Object.values(map.current)
+      .filter((item) => item.index !== -1 && item.props?.visible !== false)
+    setHasVisibleItems(items.length > 0)
+  })
+
+  if (hasVisibleItems) return null
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+      }}
+    >
+      <text flexShrink={0} fg={Theme.textMuted}>
+        No items found
+      </text>
+    </box>
+  )
+}
+
 // Component to render list items and sections
 function ListItemsRenderer(props: { children?: ReactNode }): any {
   const { children } = props
@@ -1090,6 +1136,7 @@ function ListItemsRenderer(props: { children?: ReactNode }): any {
   return (
     <ListSectionContext.Provider value={{ searchText }}>
       {children}
+      <DefaultEmptyView />
     </ListSectionContext.Provider>
   )
 }
@@ -1164,8 +1211,8 @@ const ListItem: ListItemType = (props) => {
   const handleMouseDown = () => {
     if (listContext && index !== -1) {
       // If clicking on already selected item, show actions (like pressing Enter)
-      if (isActive && props.actions) {
-        dialog.push(props.actions, 'bottom-right')
+      if (isActive) {
+        dialog.pushActions(props.actions || <ActionPanel />)
       } else if (listContext.setSelectedIndex) {
         // Otherwise just select the item
         listContext.setSelectedIndex(index)
@@ -1221,13 +1268,13 @@ const ListItemDetail: ListItemDetailType = (props) => {
     <box style={{ flexDirection: 'column', flexGrow: 1 }}>
       {isLoading && (
         <box style={{ paddingBottom: 1 }}>
-          <text fg={Theme.textMuted}>Loading...</text>
+          <text flexShrink={0} fg={Theme.textMuted}>Loading...</text>
         </box>
       )}
 
       <ScrollBox
         focused={false}
-        flexGrow={1}
+        // flexGrow={1}
         flexShrink={1}
         style={{
           rootOptions: {
@@ -1271,8 +1318,8 @@ const ListItemDetailMetadata = (props: MetadataProps) => {
 const ListItemDetailMetadataLabel = (props: { title: string; text?: string; icon?: Image.ImageLike }) => {
   return (
     <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
-      <text fg={Theme.textMuted}>{props.title}:</text>
-      {props.text && <text fg={Theme.text}>{props.text}</text>}
+      <text flexShrink={0} fg={Theme.textMuted}>{props.title}:</text>
+      {props.text && <text flexShrink={0} fg={Theme.text}>{props.text}</text>}
     </box>
   )
 }
@@ -1280,7 +1327,7 @@ const ListItemDetailMetadataLabel = (props: { title: string; text?: string; icon
 const ListItemDetailMetadataSeparator = () => {
   return (
     <box style={{ paddingBottom: 0.5 }}>
-      <text fg={Theme.border}>─────────────────</text>
+      <text flexShrink={0} fg={Theme.border}>─────────────────</text>
     </box>
   )
 }
@@ -1288,8 +1335,8 @@ const ListItemDetailMetadataSeparator = () => {
 const ListItemDetailMetadataLink = (props: { title: string; target: string; text: string }) => {
   return (
     <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
-      <text fg={Theme.textMuted}>{props.title}:</text>
-      <text fg={Theme.link}>{props.text}</text>
+      <text flexShrink={0} fg={Theme.textMuted}>{props.title}:</text>
+      <text flexShrink={0} fg={Theme.markdownLink}>{props.text}</text>
     </box>
   )
 }
@@ -1297,7 +1344,7 @@ const ListItemDetailMetadataLink = (props: { title: string; target: string; text
 const ListItemDetailMetadataTagList = (props: { title: string; children: ReactNode }) => {
   return (
     <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
-      <text fg={Theme.textMuted}>{props.title}:</text>
+      <text flexShrink={0} fg={Theme.textMuted}>{props.title}:</text>
       <box style={{ flexDirection: 'row', paddingLeft: 1 }}>
         {props.children}
       </box>
@@ -1308,7 +1355,7 @@ const ListItemDetailMetadataTagList = (props: { title: string; children: ReactNo
 const ListItemDetailMetadataTagListItem = (props: { text?: string; color?: Color.ColorLike; icon?: Image.ImageLike; onAction?: () => void }) => {
   return (
     <box style={{ paddingRight: 1 }}>
-      <text fg={resolveColor(props.color) || Theme.accent}>[{props.text}]</text>
+      <text flexShrink={0} fg={resolveColor(props.color) || Theme.accent}>[{props.text}]</text>
     </box>
   )
 }
@@ -1322,6 +1369,14 @@ ListItemDetailMetadataTagList.Item = ListItemDetailMetadataTagListItem as any
 
 ListItem.Detail = ListItemDetail
 
+/**
+ * A dropdown menu shown in the right-hand-side of the search bar.
+ * Open it with Ctrl+P or by clicking on it.
+ *
+ * Note: There is no built-in "All" or reset option. If you want users to be
+ * able to reset the filter, add a `List.Dropdown.Item` with title="All" and
+ * value="" (or your preferred reset value) at the top of your dropdown items.
+ */
 const ListDropdown: ListDropdownType = (props) => {
   const listContext = useContext(ListContext)
   const [isHovered, setIsHovered] = useState(false)
@@ -1391,37 +1446,39 @@ const ListDropdown: ListDropdownType = (props) => {
   useEffect(() => {
     if (isDropdownOpen && !dialog.stack.length) {
       // Pass the children to the dialog to render them there
-      dialog.push(
-        <ListDropdownDialog
-          {...props}
-          value={dropdownState.value}
-          onChange={(newValue) => {
-            // Find the title for this value
-            let title = newValue
-            for (const item of Object.values(descendantsContext.map.current)) {
-              const itemProps = item.props as DropdownItemDescendant
-              if (itemProps.value === newValue) {
-                title = itemProps.title
-                break
+      dialog.push({
+        element: (
+          <ListDropdownDialog
+            {...props}
+            value={dropdownState.value}
+            onChange={(newValue) => {
+              // Find the title for this value
+              let title = newValue
+              for (const item of Object.values(descendantsContext.map.current)) {
+                const itemProps = item.props as DropdownItemDescendant
+                if (itemProps.value === newValue) {
+                  title = itemProps.title
+                  break
+                }
               }
-            }
-            setDropdownState({ value: newValue, title })
-            setIsDropdownOpen(false)
-            dialog.clear()
-            if (props.onChange) {
-              props.onChange(newValue)
-            }
-            // TODO: Handle storeValue to persist the value
-          }}
-          onCancel={() => {
-            setIsDropdownOpen(false)
-            dialog.clear()
-          }}
-        >
-          {props.children}
-        </ListDropdownDialog>,
-        'top-right',
-      )
+              setDropdownState({ value: newValue, title })
+              setIsDropdownOpen(false)
+              dialog.clear()
+              if (props.onChange) {
+                props.onChange(newValue)
+              }
+              // TODO: Handle storeValue to persist the value
+            }}
+            onCancel={() => {
+              setIsDropdownOpen(false)
+              dialog.clear()
+            }}
+          >
+            {props.children}
+          </ListDropdownDialog>
+        ),
+        position: 'center',
+      })
     }
   }, [isDropdownOpen, props.children])
 
@@ -1455,12 +1512,14 @@ const ListDropdown: ListDropdownType = (props) => {
         >
           {/*<text >^p </text>*/}
           <text
+            flexShrink={0}
             fg={isHovered ? Theme.text : Theme.textMuted}
             selectable={false}
           >
             {displayValue}
           </text>
           <text
+            flexShrink={0}
             fg={isHovered ? Theme.text : Theme.textMuted}
             selectable={false}
           >
@@ -1552,11 +1611,12 @@ ListDropdown.Item = (props) => {
       >
         <box style={{ flexDirection: 'row' }}>
           {isActive && (
-            <text fg={Theme.background} selectable={false}>
+            <text flexShrink={0} fg={Theme.background} selectable={false}>
               ›{''}
             </text>
           )}
           <text
+            flexShrink={0}
             fg={
               isActive
                 ? Theme.background
@@ -1605,7 +1665,7 @@ ListDropdown.Section = (props) => {
       {/* Render section title if we're in the dialog and not searching */}
       {showTitle && (
         <box style={{ paddingTop: 1, paddingLeft: 1 }}>
-          <text fg={Theme.accent} attributes={TextAttributes.BOLD}>
+          <text flexShrink={0} fg={Theme.accent} attributes={TextAttributes.BOLD}>
             {props.title}
           </text>
         </box>
@@ -1659,7 +1719,7 @@ const ListSection = (props: SectionProps) => {
             paddingLeft: 1,
           }}
         >
-          <text fg={Theme.accent} attributes={TextAttributes.BOLD}>
+          <text flexShrink={0} fg={Theme.accent} attributes={TextAttributes.BOLD}>
             {props.title}
           </text>
         </box>
@@ -1679,16 +1739,16 @@ List.EmptyView = (props: EmptyViewProps) => {
   useKeyboard((evt) => {
     if (!inFocus) return
 
-    // Handle Ctrl+K to show actions
-    if (evt.name === 'k' && evt.ctrl && props.actions) {
-      dialog.push(props.actions, 'bottom-right')
+    // Handle Ctrl+K to show actions (always show panel, even without actions)
+    if (evt.name === 'k' && evt.ctrl) {
+      dialog.pushActions(props.actions || <ActionPanel />)
       return
     }
 
     // Handle Enter to execute first action
     if (evt.name === 'return' && props.actions) {
       useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.push(props.actions, 'bottom-right')
+      dialog.pushActions(props.actions)
     }
   })
 
@@ -1724,17 +1784,17 @@ List.EmptyView = (props: EmptyViewProps) => {
       }}
     >
       {iconEmoji && (
-        <text fg={Theme.textMuted} style={{ marginBottom: 1 }}>
+        <text flexShrink={0} fg={Theme.textMuted} style={{ marginBottom: 1 }}>
           {iconEmoji}
         </text>
       )}
       {props.title && (
-        <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
           {props.title?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
         </text>
       )}
       {props.description && (
-        <text fg={Theme.textMuted} wrapMode='word'>
+        <text flexShrink={0} fg={Theme.textMuted} wrapMode='word'>
           {props.description?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
         </text>
       )}

package/src/components/loading-bar.tsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'
+import React, { useState, useRef, useLayoutEffect } from 'react'
 import { BoxRenderable } from '@opentui/core'
-import {} from '@opentui/react'
 import { Theme } from 'termcast/src/theme'
-import { logger } from 'termcast/src/logger'
+import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
 
 interface LoadingBarProps {
   title: string
@@ -12,12 +11,11 @@ interface LoadingBarProps {
 
 export function LoadingBar(props: LoadingBarProps): any {
   let { title, isLoading = false, barLength: propBarLength } = props
-  const [position, setPosition] = useState(0)
   const [calculatedBarLength, setCalculatedBarLength] = useState(
     propBarLength || 0,
   )
-  const intervalRef = useRef<NodeJS.Timeout | null>(null)
   const containerRef = useRef<BoxRenderable>(null)
+  const tick = useAnimationTick(isLoading ? TICK_DIVISORS.LOADING_BAR : 0)
 
   // Calculate bar length based on container width
   useLayoutEffect(() => {
@@ -73,26 +71,8 @@ export function LoadingBar(props: LoadingBarProps): any {
   ]
 
   const waveWidth = waveColors.length
-
-  useEffect(() => {
-    if (isLoading) {
-      intervalRef.current = setInterval(() => {
-        setPosition((prev) => (prev + 1) % (characters.length + waveWidth))
-      }, 10)
-    } else {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-        intervalRef.current = null
-      }
-      setPosition(0)
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-      }
-    }
-  }, [isLoading, characters.length, waveWidth])
+  const totalAnimLength = characters.length + waveWidth
+  const position = isLoading ? tick % totalAnimLength : 0
 
   // Calculate color for each character
   const getCharacterColor = (index: number): string => {