d85781ef99
* Add a setting for themeColor * Add primary-color to Tailwind, driven by themeColor setting * Get rid of most uses of "energy" colors * Change out the rest of the energy colors * Tweak NetworkHealthIndicator light mode checkmarks * Handful of other CSS tweaks while I'm here: - remove the AppHeader bg and border - pane margins - better dark mode button styles * Make Zoo logomark a badge * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Re-run CI post-snapshots * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Retrigger CI --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
const Loading = ({ children }: React.PropsWithChildren) => {
|
|
const [hasLongLoadTime, setHasLongLoadTime] = useState(false)
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setHasLongLoadTime(true)
|
|
}, 4000)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [setHasLongLoadTime])
|
|
return (
|
|
<div
|
|
className="body-bg flex flex-col items-center justify-center h-screen"
|
|
data-testid="loading"
|
|
>
|
|
<svg viewBox="0 0 10 10" className="w-8 h-8">
|
|
<circle
|
|
cx="5"
|
|
cy="5"
|
|
r="4"
|
|
stroke="var(--primary)"
|
|
fill="none"
|
|
strokeDasharray="4, 4"
|
|
className="animate-spin origin-center"
|
|
/>
|
|
</svg>
|
|
<p className="text-base mt-4 text-primary">{children || 'Loading'}</p>
|
|
<p
|
|
className={
|
|
'text-sm mt-4 text-primary/60 transition-opacity duration-500' +
|
|
(hasLongLoadTime ? ' opacity-100' : ' opacity-0')
|
|
}
|
|
>
|
|
Loading is taking longer than expected.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Loading
|