added preloader to panel

app/Http/Controllers/Admin/PropController.php

@@ -18,7 +18,7 @@ class PropController extends XController
     // protected  $_MODEL_ = Prop::class;
     // protected  $SAVE_REQUEST = PropSaveRequest::class;
 
-    protected $cols = ['name','label'];
+    protected $cols = ['name','label','icon'];
     protected $extra_cols = ['id'];
 
     protected $searchable = ['name','label'];

resources/js/app.js

@@ -29,6 +29,7 @@ import './panel/product-upload-controller.js';
 import './panel/setting-section-controller.js';
 import './panel/sotable-controller.js';
 import './panel/prototypes.js';
+import './panel/panel-window-loader.js';
 
 // chartjs.defaults.defaultFontFamily = "Vazir";
 // chartjs.defaults.defaultFontSize = 18;

resources/js/panel/panel-window-loader.js

@@ -0,0 +1,23 @@
+let isWinLoaded = false;
+window.addEventListener('load',function () {
+
+    if (!isWinLoaded){
+        forceLoad();
+        isWinLoaded = true;
+    }
+});
+
+
+setTimeout(function () {
+    if (!isWinLoaded){
+        forceLoad();
+        isWinLoaded = true;
+    }
+},5000);
+const forceLoad = function () {
+    const  preloader = document.querySelector('#panel-preloader');
+    preloader.style.height = 0;
+    setTimeout( () => {
+      preloader.style.display = 'none';
+    },500);
+};

resources/sass/panel/_common.scss

@@ -274,3 +274,52 @@ a.btn,a.action-btn,a.circle-btn{
 }
 
 
+#panel-preloader{
+    transition: 490ms;
+    position: fixed;
+    z-index: 9999999;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #00000099;
+    backdrop-filter: blur(7px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: lighten($primary-color-panel,15);
+    .loader {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        &:before {
+            content: '';
+            border-radius: 50%;
+            position: absolute;
+            inset: 0;
+            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
+        }
+        &:after {
+            content: '';
+            border-radius: 50%;
+            position: absolute;
+            inset: 0;
+            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
+            box-shadow: 0 2px 0 #FF3D00 inset;
+            animation: rotate 2s linear infinite;
+        }
+    }
+
+
+}
+
+
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

resources/views/layouts/app.blade.php

@@ -1,4 +1,7 @@
 @include('components.panel-header')
+<div id="panel-preloader">
+    <div class="loader"></div>
+</div>
 <div id="app">
 
     <input type="hidden" id="panel-dir" @if(langIsRTL(config('app.locale'))) value="rtl" @else value="ltr" @endif>