nonworking indicator, sort broken

src/components/LoadingIndicator.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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>
+  );
+}