From 10a914087d0976657502daeada2c0a1cbc78e477 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Sat, 7 Jan 2023 10:23:48 +0100
Subject: [PATCH] .

---
 resources/css/app.sass           | 33 ++++++++++++++++++++++++++++++++
 resources/js/mmenu.js            | 12 ++++++++----
 resources/views/layout.blade.php | 24 ++++++++++++++++++-----
 3 files changed, 60 insertions(+), 9 deletions(-)
diff --git a/resources/css/app.sass b/resources/css/app.sass
index 5278a04..9553feb 100644
--- a/resources/css/app.sass
+++ b/resources/css/app.sass
@@ -98,6 +98,39 @@ body
         background: #000
         min-height: 100%
 
+@keyframes loader-spin
+    0%
+        transform: rotate(0deg)
+    100%
+        transform: rotate(360deg)
+
+#loader
+    position: fixed
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    cursor: wait
+    z-index: 10000000
+    display: none
+
+    svg
+        position: absolute
+        width: 48px
+        height: 48px
+        top: calc(50% - 24px)
+        left: calc(50% - 24px)
+        color: var(--theme-color)
+
+    &.show
+        display: block
+
+        svg
+            animation-name: loader-spin
+            animation-duration: 1s
+            animation-iteration-count: infinite
+            animation-timing-function: linear
+
 main
     padding: 20px 14px
     min-height: 100%
diff --git a/resources/js/mmenu.js b/resources/js/mmenu.js
index 2eff700..80812bf 100644
--- a/resources/js/mmenu.js
+++ b/resources/js/mmenu.js
@@ -34,17 +34,21 @@ document.addEventListener("DOMContentLoaded", () => {
     $('body').addClass('init');
 });
 
-setInterval(function () {
-    $('body').addClass('init');
-}, 2000);
 $(function () {
     $('body').addClass('init');
 });
 
 $(window).on('beforeunload', function () {
-    $('body').removeClass('init');
+    $('#loader').addClass('show');
+    setTimeout(function(){
+        $('#loader').removeClass('show');
+    },5000);
 });
 
+// $(window).on('pagehide,unload', function () {
+//     $('#loader').removeClass('show');
+// });
+
 
 function updateSongView() {
     try {
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 43068c7..18ea613 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -3,17 +3,17 @@
 @else
 @include('menu')
 @endif
-<!DOCTYPE html>
+    <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>@yield('title')</title>
     <style>
-		body {
-			--theme-color: {{$collection->theme_color}};
-			--plyr-color-main: {{$collection->theme_color}};
-		}
+        body {
+            --theme-color: {{$collection->theme_color}};
+            --plyr-color-main: {{$collection->theme_color}};
+        }
     </style>
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
     <link rel="manifest" href="/{{$collection->slug}}.webmanifest">
@@ -46,7 +46,21 @@
         <path fill="currentColor" d="M113.956,57.006l-97.4-56.2c-4-2.3-9,0.6-9,5.2v112.5c0,4.6,5,7.5,9,5.2l97.4-56.2
 		C117.956,65.105,117.956,59.306,113.956,57.006z"/>
     </symbol>
+    <symbol id="interface-loader" viewBox="0 0 48 48">
+        <circle cx="24" cy="24" r="23"></circle>
+        <circle class="animate" cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16"
+                stroke-dasharray="80 80"
+                transform="rotate(0 24 24)">
+        </circle>
+    </symbol>
 </svg>
+<div id="loader">
+<svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="23"></circle>
+    <circle class="animate" cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16"
+            stroke-dasharray="80 80"
+            transform="rotate(0 24 24)">
+    </circle></svg>
+</div>
 <main class="content page" id="page">
     @yield('content')
 </main>
-- 
2.39.5

