From 0b256827e72c3e31953f0cbe6c7b1180b57d38f1 Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Wed, 30 Dec 2020 15:21:59 -0700
Subject: [PATCH] Added loading spinner while page is loading

---
 app/resources/js/app.js    | 3 +++
 app/views/layouts/app.twig | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/resources/js/app.js b/app/resources/js/app.js
index 0c1b13c..cd36dc1 100644
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -5,6 +5,7 @@ const app = new Vue({
     el: '#app',
     components: { FileInfoModal },
     data: () => ({
+        loading: true,
         theme: 'light',
         menuOpen: false,
     }),
@@ -37,6 +38,8 @@ const app = new Vue({
                 this.$refs.scrollToTop.classList.add('hidden');
             }
         }.bind(this));
+
+        this.loading = false;
     },
     watch: {
         theme: value => localStorage.setItem('theme', value),
diff --git a/app/views/layouts/app.twig b/app/views/layouts/app.twig
index 32e9644..f2c43ed 100644
--- a/app/views/layouts/app.twig
+++ b/app/views/layouts/app.twig
@@ -17,10 +17,14 @@
 
 <title>{{ title }} &bull; Directory Lister</title>
 
-<div id="app" v-bind:class="{ dark: darkMode }" v-cloak>
+<div id="app" v-bind:class="{ dark: darkMode }">
     <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
         {% block content %}{% endblock %}
     </div>
+
+    <div class="fixed inset-0 flex flex-col justify-center items-center min-h-screen bg-gray-900 bg-opacity-90" v-show="loading">
+        <i class="fas fa-spinner fa-pulse fa-5x text-white"></i>
+    </div>
 </div>
 
-<script src="{{ asset('app.js') }}" defer></script>
+<script src="{{ asset('app.js') }}"></script>