From 2a83c9a0dfa32acd4589cac3594e54babe92bd51 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Mon, 9 Feb 2026 01:20:25 +0100
Subject: [PATCH] Add loading dashboard panel (#23)

---
 package.json                      |   6 ++
 src/dashboard/loading/loading.css |   4 ++
 src/dashboard/loading/main.ts     |  12 ++++
 src/dashboard/loading/main.vue    | 103 ++++++++++++++++++++++++++++++
 4 files changed, 125 insertions(+)
 create mode 100644 src/dashboard/loading/loading.css
 create mode 100644 src/dashboard/loading/main.ts
 create mode 100644 src/dashboard/loading/main.vue

diff --git a/package.json b/package.json
index a2c2a6b..f8f3bc8 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,12 @@
         "title": "Example",
         "file": "example/main.html",
         "fullbleed": true
+      },
+      {
+        "name": "loading",
+        "title": "Loading",
+        "file": "loading/main.html",
+        "fullbleed": true
       }
     ],
     "graphics": [
diff --git a/src/dashboard/loading/loading.css b/src/dashboard/loading/loading.css
new file mode 100644
index 0000000..d1cc645
--- /dev/null
+++ b/src/dashboard/loading/loading.css
@@ -0,0 +1,4 @@
+/* Hide the scrollbar while loading. */
+::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/dashboard/loading/main.ts b/src/dashboard/loading/main.ts
new file mode 100644
index 0000000..e0f9481
--- /dev/null
+++ b/src/dashboard/loading/main.ts
@@ -0,0 +1,12 @@
+import '@quasar/extras/material-icons/material-icons.css';
+import '@quasar/extras/roboto-font/roboto-font.css';
+import { Dark, Quasar } from 'quasar';
+import 'quasar/src/css/index.sass';
+import { createApp } from 'vue';
+import App from './main.vue';
+import './loading.css';
+
+const app = createApp(App);
+app.use(Quasar);
+app.mount('#app');
+Dark.set(true);
diff --git a/src/dashboard/loading/main.vue b/src/dashboard/loading/main.vue
new file mode 100644
index 0000000..856a396
--- /dev/null
+++ b/src/dashboard/loading/main.vue
@@ -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>