Add loading dashboard panel (#23)

2026-06-06 03:32:06 +00:00 · 2026-02-09 01:20:25 +01:00
parent e045331a95
commit 2a83c9a0df
4 changed files with 125 additions and 0 deletions
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const loadQuotes = [
+  // Misc
+  'Demanding rollback netcode',
+  'Disrespecting your plus frames',
+  'Taking your lunch money',
+  // Street Fighter
+  'Parrying your super',
+  'Fighting like gentlemen',
+  'Fighting a new rival',
+  'Keeping it classy',
+  "Protecting Russia's skies",
+  'Waking up with Dragon Punch',
+  'Teching those throws',
+  'Finding the heart of battle',
+  'Chucking plasma',
+  'Executing the Yeah Nah Yeah',
+  // Guilty Gear
+  'Counter-hitting Pilebunker',
+  'Riding the lightning',
+  'Knowing the smell of the game',
+  'Dropping the instant kill combo',
+  'What are you standing up for?!',
+  'Stealing your soul',
+  'Channelling your inner gorilla',
+  'Initiating danger time',
+  'Dragon Installing',
+  'Practising dust loops',
+  // BlazBlue
+  'Turning the wheel of fate',
+  'Escaping from crossing fate',
+  // Tekken
+  "Complaining about Paul's damage",
+  'Nerfing Gigas',
+  'Mashing hopkick',
+  'Sidestepping your electric',
+  'Punishing hellsweep with 1,1,2',
+  'Emailing Harada',
+  // Marvel
+  'Explaining the DHC glitch',
+  "When's Mahvel?",
+  'Thanking god for the machine',
+  'Setting up shop',
+  'Getting motivated',
+  'Activating X-Factor',
+  // Dragon Ball
+  'Adding yet another Goku',
+];
+
+const randomIndex = Math.floor(Math.random() * loadQuotes.length);
+const loadQuote = ref(loadQuotes[randomIndex]);
+</script>
+
+<template>
+  <QLayout view="hHh LpR fFf">
+    <QPageContainer>
+      <QPage class="loading-page">
+        <div class="loading-content">
+          <QSpinner
+            color="primary"
+            size="50px"
+            :thickness="5"
+          />
+          <div class="quote text-subtitle1 q-mt-md">
+            {{ loadQuote }}
+          </div>
+          <div class="status text-subtitle2">
+            Loading...
+          </div>
+        </div>
+      </QPage>
+    </QPageContainer>
+  </QLayout>
+</template>
+
+<style>
+.loading-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f5f5f5;
+  text-align: center;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.quote {
+  max-width: 520px;
+}
+
+.status {
+  font-style: italic;
+  opacity: 0.7;
+}
+</style>