1 files changed, 56 insertions, 0 deletions
diff --git a/lib/components/InitialLoadScreen.svelte b/lib/components/InitialLoadScreen.svelte
new file mode 100644
index 0000000..3800715
--- /dev/null
+++ b/lib/components/InitialLoadScreen.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import AppTitle from '@hollowdark/lib/components/AppTitle.svelte'
+  import ProgressBar from '@hollowdark/lib/components/ProgressBar.svelte'
+  import { loadingProgress } from '@hollowdark/loading/progress'
+
+  const progress = $derived($loadingProgress)
+</script>
+
+<section class="initial-load">
+  <div class="top">
+    <AppTitle size={32} letterSpacing={1} />
+  </div>
+
+  <div class="bar">
+    <ProgressBar value={progress.percentage} />
+  </div>
+
+  <p class="message">{progress.currentMessage}</p>
+  <p class="note">This will happen once. It will not happen again.</p>
+</section>
+
+<style>
+  .initial-load {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-12);
+    text-align: center;
+  }
+
+  .top {
+    margin-bottom: 120px;
+  }
+
+  .bar {
+    margin-bottom: var(--space-6);
+  }
+
+  .message {
+    font-family: var(--font-ui);
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    letter-spacing: 0.5px;
+    margin: 0 0 var(--space-2);
+  }
+
+  .note {
+    font-family: var(--font-ui);
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+    letter-spacing: 0.3px;
+    margin: 0;
+  }
+</style>