[GH-ISSUE #282] @opentui/react example request: loading spinner #74

New issue

Closed

opened 2026-03-02 23:44:21 +03:00 by kerem · 3 comments

kerem commented

2026-03-02 23:44:21 +03:00

Owner

Originally created by @macklinu on GitHub (Nov 8, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/282

Whether it's using a library like https://github.com/sindresorhus/cli-spinners or some simple loading animation, I would love to learn how to make a loading spinner using @opentui/react.

(opening this issue in case others have sample code to share - I will hopefully figure it out and comment with what I came up with and figure out how to bake it into documentation/examples in the repo.)

Originally created by @macklinu on GitHub (Nov 8, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/282 Whether it's using a library like https://github.com/sindresorhus/cli-spinners or some simple loading animation, I would love to learn how to make a loading spinner using `@opentui/react`. (opening this issue in case others have sample code to share - I will hopefully figure it out and comment with what I came up with and figure out how to bake it into documentation/examples in the repo.)

kerem closed this issue

2026-03-02 23:44:21 +03:00

kerem commented

2026-03-02 23:44:22 +03:00

Author

Owner

@msmps commented on GitHub (Nov 8, 2025):

I actually have a library ready to publish for this. I’ll sort that out in an hour or so and that should hopefully be a good example.

@msmps commented on GitHub (Nov 8, 2025): I actually have a library ready to publish for this. I’ll sort that out in an hour or so and that should hopefully be a good example.

kerem commented

2026-03-02 23:44:22 +03:00

Author

Owner

@macklinu commented on GitHub (Nov 8, 2025):

Ok awesome thanks @msmps! My crude initial attempt was to do this:

import { TextAttributes } from '@opentui/core'
import spinners from 'cli-spinners'
import { useEffect, useState } from 'react'

const Loading = ({ kind }: { kind: spinners.SpinnerName }) => {
  const [frame, setFrame] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setFrame((frame) => frame + 1)
    }, spinners[kind].interval)
    return () => clearInterval(interval)
  }, [kind])

  return (
    <text attributes={TextAttributes.DIM}>
      {spinners[kind].frames[frame % spinners[kind].frames.length]}
    </text>
  )
}

// usage
<Loading kind='dots' />

Would love to see what you've done.

@macklinu commented on GitHub (Nov 8, 2025): Ok awesome thanks @msmps! My crude initial attempt was to do this: ```tsx import { TextAttributes } from '@opentui/core' import spinners from 'cli-spinners' import { useEffect, useState } from 'react' const Loading = ({ kind }: { kind: spinners.SpinnerName }) => { const [frame, setFrame] = useState(0) useEffect(() => { const interval = setInterval(() => { setFrame((frame) => frame + 1) }, spinners[kind].interval) return () => clearInterval(interval) }, [kind]) return ( <text attributes={TextAttributes.DIM}> {spinners[kind].frames[frame % spinners[kind].frames.length]} </text> ) } // usage <Loading kind='dots' /> ``` Would love to see what you've done.

kerem commented

2026-03-02 23:44:22 +03:00

Author

Owner

@msmps commented on GitHub (Nov 9, 2025):

@macklinu nice! your example is perfectly fine and is very similar to how i started before i decided to leverage the core primitives and extend to support all of our renderers! i've pushed to git/npm if you were interested in taking a look 😃

https://git.new/opentui-spinner

@msmps commented on GitHub (Nov 9, 2025): @macklinu nice! your example is perfectly fine and is very similar to how i started before i decided to leverage the core primitives and extend to support all of our renderers! i've pushed to git/npm if you were interested in taking a look 😃 https://git.new/opentui-spinner

kerem referenced this issue

2026-03-14 08:33:05 +03:00

[GH-ISSUE #74] Support selecting a word with double click #784