ui/loading-bar: move into component

pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
+import { LoadingBar } from "./LoadingBar";
+
+const meta: Meta = {
+  title: "Components/LoadingBar",
+  component: LoadingBar,
+  decorators: [
+    (Story: StoryObj, context: StoryContext<unknown>) => {
+      return (
+        <div class={"flex w-fit items-center justify-center bg-slate-500 p-10"}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.module.css

@@ -0,0 +1,24 @@
+.loading_bar {
+  @apply h-3 w-60;
+  width: 18rem;
+  background: repeating-linear-gradient(
+    -45deg,
+    #bfd0d2 0px,
+    #bfd0d2 10px,
+    #f7f9fa 10px,
+    #f7f9fa 20px
+  );
+  animation: stripe-move 1s linear infinite;
+  background-size: 28px 28px; /* Sqrt(20^2 + 20^2) ~= 28 */
+
+  @apply border-2 border-solid rounded-[3px] border-bg-def-1;
+}
+
+@keyframes stripe-move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 28px 0;
+  }
+}

pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.tsx

@@ -0,0 +1,3 @@
+import styles from "./LoadingBar.module.css";
+
+export const LoadingBar = () => <div class={styles.loading_bar} />;

pkgs/clan-app/ui/src/scene/splash.module.css

@@ -18,28 +18,3 @@
 .splash_title {
   @apply h-8 mb-8;
 }
-
-.loading_bar {
-  @apply h-3 w-60 mb-3;
-  width: 18rem;
-  background: repeating-linear-gradient(
-    -45deg,
-    #bfd0d2 0px,
-    #bfd0d2 10px,
-    #f7f9fa 10px,
-    #f7f9fa 20px
-  );
-  animation: stripe-move 1s linear infinite;
-  background-size: 28px 28px; /* Sqrt(20^2 + 20^2) ~= 28 */
-
-  @apply border-2 border-solid rounded-[3px] border-bg-def-1;
-}
-
-@keyframes stripe-move {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 28px 0;
-  }
-}

pkgs/clan-app/ui/src/scene/splash.tsx

@@ -1,6 +1,7 @@
 import Logo from "@/logos/darknet-builder-logo.svg";
 import styles from "./splash.module.css";
 import { Typography } from "../components/Typography/Typography";
+import { LoadingBar } from "../components/LoadingBar/LoadingBar";
 
 export const Splash = () => (
   <div class={styles.splash}>
@@ -8,7 +9,7 @@ export const Splash = () => (
       <span class={styles.splash_title}>
         <Logo />
       </span>
-      <div class={styles.loading_bar} />
+      <LoadingBar />
 
       <Typography hierarchy="label" size="xs" weight="medium">
         Loading new Clan