feat: add loading template

Rule-34 · Mar 30, 2024 · 6f197d1 · 6f197d1
1 parent 52c3730
commit 6f197d1
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 6 deletions.
diff --git a/app/spa-loading-template.html b/app/spa-loading-template.html
@@ -0,0 +1,59 @@
+<style>
+  html {
+    background-color: black;
+  }
+
+  .loader-container {
+
+    position: fixed;
+
+    inset: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loader {
+    display: block;
+
+    width: 30vw;
+    height: 30vw;
+
+    // TODO: Add a max-width and max-height to specific display sizes
+    max-width: 300px;
+    max-height: 300px;
+
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: .6;
+    }
+  }
+</style>
+
+<div class='loader-container'>
+
+  <!-- icon.svg -->
+  <svg class='loader' fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <!-- Filters -->
+    <filter id="shadow">
+      <feDropShadow dx="0" dy="0" flood-color="#fff" stdDeviation="1"/>
+    </filter>
+
+    <g filter="url(#shadow)">
+
+      <!-- Star -->
+      <path clip-rule="evenodd"
+            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
+            fill-rule="evenodd"/>
+    </g>
+  </svg>
+
+  <!-- TODO: Add screenreader text -->
+</div>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -1,8 +1,10 @@
-import { sentryVitePlugin } from '@sentry/vite-plugin'
+import {sentryVitePlugin} from '@sentry/vite-plugin'
 
 export default defineNuxtConfig({
   ssr: false,
 
+  spaLoadingTemplate: true,
+
   /**
    * @see https://nuxt.com/docs/guide/concepts/rendering#route-rules
    */
@@ -71,7 +73,7 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/main.css', '~/assets/css/cookieconsent.css'],
 
-  components: [{ path: '~/components', pathPrefix: false }],
+  components: [{path: '~/components', pathPrefix: false}],
 
   site: {
     url: `https://${process.env.APP_DOMAIN}`
@@ -138,9 +140,9 @@ export default defineNuxtConfig({
           property: false
         },
         endpoints: {
-          login: { url: process.env.API_URL + '/auth/log-in', method: 'post' },
-          refresh: { url: process.env.API_URL + '/auth/refresh', method: 'post' },
-          user: { url: process.env.API_URL + '/auth/profile', method: 'get' },
+          login: {url: process.env.API_URL + '/auth/log-in', method: 'post'},
+          refresh: {url: process.env.API_URL + '/auth/refresh', method: 'post'},
+          user: {url: process.env.API_URL + '/auth/profile', method: 'get'},
           logout: false
         }
       }
@@ -230,7 +232,7 @@ export default defineNuxtConfig({
       style: [
         {
           type: 'text/css',
-          cssText: 'html, body { background-color: black; }'
+          children: 'html { background-color: black; }'
         }
       ],
       script: [