Fixed menu loading issue..

akaunting · Nov 1, 2023 · 24e8fbb · 24e8fbb
1 parent f911714
commit 24e8fbb
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 18 deletions.
diff --git a/resources/views/components/documents/form/content.blade.php b/resources/views/components/documents/form/content.blade.php
@@ -1,4 +1,5 @@
 <x-loading.content />
+
 <div class="relative mt-4">
     <x-form 
         id="{{ $formId }}"

diff --git a/resources/views/components/index/container.blade.php b/resources/views/components/index/container.blade.php
@@ -1,5 +1,5 @@
+<x-loading.content />
+
 <div {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'my-5']) : $attributes }}>
     {!! $slot !!}
 </div>
-
-<x-loading.content />
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
@@ -1,5 +1,7 @@
 @props(['companies'])
 
+<x-loading.menu />
+
 <div class="container flex items-center py-3 mb-4 border-b-2 xl:hidden">
     <span class="material-icons text-black js-hamburger-menu">menu</span>
 
@@ -29,7 +31,12 @@
 
 <div
     x-data="{ }"
-    x-init="setTimeout(() => $refs.realMenu.classList.remove('hidden'), 1000)"
+    x-init="() => {
+        const loadEvent = 'onpagehide' in window ? 'pageshow' : 'load';
+        window.addEventListener(loadEvent, () => {
+            $refs.realMenu.classList.remove('hidden');
+        });
+    }"
     x-ref="realMenu"
     class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
 >
@@ -276,7 +283,4 @@ class="flex flex-col items-center justify-center mb-5 cursor-pointer menu-button
     <div class="fixed w-full h-full invisible lg:hidden js-menu-background" style="background-color: rgba(0, 0, 0, 0.5); z-index: -1;"></div>
 </div>
 
-<x-loading.menu />
-
 @stack('menu_end')
-
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
@@ -1,5 +1,7 @@
 @props(['companies'])
 
+<x-loading.menu />
+
 <div class="container flex items-center py-3 mb-4 border-b-2 xl:hidden">
     <span class="material-icons text-black js-hamburger-menu">menu</span>
 
@@ -13,7 +15,12 @@
 
 <div
     x-data="{ }"
-    x-init="setTimeout(() => $refs.realMenu.classList.remove('hidden'), 1000)"
+    x-init="() => {
+        const loadEvent = 'onpagehide' in window ? 'pageshow' : 'load';
+        window.addEventListener(loadEvent, () => {
+            $refs.realMenu.classList.remove('hidden');
+        });
+    }"
     x-ref="realMenu"
     class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
 >
@@ -63,13 +70,13 @@ class="flex flex-col items-center justify-center mb-5 cursor-pointer menu-button
                 </button>
             </x-tooltip>
             @endcan
-            
+
             <x-tooltip id="tooltip-search" placement="right" message="{{ trans('general.search') }}">
                 <button type="button" class="flex items-center menu-button justify-center w-8 h-8 mb-2.5 relative cursor-pointer outline-none">
                     <span name="search" class="material-icons-outlined text-purple text-2xl pointer-events-none">search</span>
                 </button>
             </x-tooltip>
-            
+
             <x-tooltip id="tooltip-support" placement="right" message="{{ trans('general.help') }}">
                 <x-link href="{{ url(trans('header.support_link')) }}" target="_blank" class="flex items-center justify-center w-8 h-8 mb-2.5 cursor-pointer js-menu-toggles" override="class">
                     <span class="material-icons-outlined text-purple text-2xl pointer-events-none">support</span>
@@ -179,7 +186,4 @@ class="flex flex-col items-center justify-center mb-5 cursor-pointer menu-button
     <div class="fixed w-full h-full invisible lg:hidden js-menu-background" style="background-color: rgba(0, 0, 0, 0.5); z-index: -1;"></div>
 </div>
 
-<x-loading.menu />
-
 @stack('menu_end')
-
diff --git a/resources/views/components/loading/menu.blade.php b/resources/views/components/loading/menu.blade.php
@@ -1,9 +1,12 @@
 <div
     x-data="{ loaded: false }"
-    x-init="window.addEventListener('load', () => { 
-        loaded = true; 
-        $refs.loadingMenu.remove();
-    })"
+    x-init="() => {
+        const loadEvent = 'onpagehide' in window ? 'pageshow' : 'load';
+        window.addEventListener(loadEvent, () => {
+            loaded = true; 
+            $refs.loadingMenu.remove();
+        });
+    }"
     x-ref="loadingMenu"
     class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
 >

diff --git a/resources/views/components/reports/show.blade.php b/resources/views/components/reports/show.blade.php
@@ -65,11 +65,11 @@
 
     <x-slot name="content">
         <div class="my-10">
+            <x-loading.content />
+
             @include($class->views['filter'])
 
             @include($class->views[$class->type])
-
-            <x-loading.content />
         </div>
     </x-slot>
 

diff --git a/resources/views/components/show/content/right.blade.php b/resources/views/components/show/content/right.blade.php
@@ -2,5 +2,6 @@
     @if (! isset($attributes['disable-loading']))
         <x-loading.absolute />
     @endif
+
     {!! $slot !!}
 </div>