@opentui/react example request: loading spinner

[macklinu]

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.)

[msmps]

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.

[macklinu]

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.

[msmps]

@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