37 lines
769 B
TypeScript
37 lines
769 B
TypeScript
/**
|
|
* Loading indicator component
|
|
* Displays an animated sliding bar at the top of the screen
|
|
*/
|
|
|
|
import { For } from "solid-js";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
|
|
interface LoadingIndicatorProps {
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export function LoadingIndicator(props: LoadingIndicatorProps) {
|
|
const { theme } = useTheme();
|
|
|
|
if (!props.isLoading) return null;
|
|
|
|
return (
|
|
<box
|
|
flexDirection="row"
|
|
width="100%"
|
|
height={1}
|
|
backgroundColor={theme.background}
|
|
>
|
|
<For each={Array.from({ length: 10 })}>
|
|
{(_, index) => (
|
|
<box
|
|
width={2}
|
|
backgroundColor={theme.primary}
|
|
style={{ opacity: 0.1 + index() * 0.1 }}
|
|
/>
|
|
)}
|
|
</For>
|
|
</box>
|
|
);
|
|
}
|