39 lines
843 B
JavaScript
39 lines
843 B
JavaScript
|
import { h } from 'preact'
|
||
|
|
import { useRef, useState } from 'preact/hooks'
|
||
|
|
import { useInterval, useTimeout } from '../../hooks/timerHooks'
|
||
|
|
import { colours } from '../../assets/theme'
|
||
|
|
import { H1 } from '../Text'
|
||
|
|
|
||
|
|
// const symbols = ['⌏', '⌎', '⌌', '⌍']
|
||
|
|
|
||
|
|
const Loader = ({
|
||
|
|
active = true,
|
||
|
|
offset = 0,
|
||
|
|
animation = [':..', '.:.', '..:', '...'],
|
||
|
|
}) => {
|
||
|
|
const [text, setText] = useState('.')
|
||
|
|
const arrayPosition = useRef(offset)
|
||
|
|
const rate = 350
|
||
|
|
|
||
|
|
useInterval(
|
||
|
|
() => {
|
||
|
|
setText(animation[arrayPosition.current])
|
||
|
|
|
||
|
|
if (arrayPosition.current === animation.length - 1) {
|
||
|
|
arrayPosition.current = 0
|
||
|
|
} else {
|
||
|
|
arrayPosition.current += 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
active ? rate : null
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<H1 as="span" colour={colours.midnightDarker}>
|
||
|
|
{text}
|
||
|
|
</H1>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Loader
|