From 7b54e9b033e48518918858789b0c0c663da0545a Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 5 Aug 2025 16:20:56 +0200
Subject: [PATCH] ui/loading-bar: move into component

---
 .../LoadingBar/LadingBar.stories.tsx          | 22 ++++++++++++++++
 .../LoadingBar/LoadingBar.module.css          | 24 ++++++++++++++++++
 .../src/components/LoadingBar/LoadingBar.tsx  |  3 +++
 pkgs/clan-app/ui/src/scene/splash.module.css  | 25 -------------------
 pkgs/clan-app/ui/src/scene/splash.tsx         |  3 ++-
 5 files changed, 51 insertions(+), 26 deletions(-)
 create mode 100644 pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx
 create mode 100644 pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.module.css
 create mode 100644 pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.tsx

diff --git a/pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx b/pkgs/clan-app/ui/src/components/LoadingBar/LadingBar.stories.tsx
new file mode 100644
index 000000000..37eb3cea1
--- /dev/null
+++ b/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 = {};
diff --git a/pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.module.css b/pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.module.css
new file mode 100644
index 000000000..7cc66bb70
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.tsx b/pkgs/clan-app/ui/src/components/LoadingBar/LoadingBar.tsx
new file mode 100644
index 000000000..4e0992666
--- /dev/null
+++ b/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} />;
diff --git a/pkgs/clan-app/ui/src/scene/splash.module.css b/pkgs/clan-app/ui/src/scene/splash.module.css
index 2b7972a8a..d10fe63e1 100644
--- a/pkgs/clan-app/ui/src/scene/splash.module.css
+++ b/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;
-  }
-}
diff --git a/pkgs/clan-app/ui/src/scene/splash.tsx b/pkgs/clan-app/ui/src/scene/splash.tsx
index 9e8d33164..bcf3e3656 100644
--- a/pkgs/clan-app/ui/src/scene/splash.tsx
+++ b/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