diff --git a/build/js/Layout.js b/build/js/Layout.js
index 0a752d7f461..7e20d5912b2 100644
--- a/build/js/Layout.js
+++ b/build/js/Layout.js
@@ -26,6 +26,7 @@ const SELECTOR_FOOTER = '.main-footer'
const SELECTOR_PUSHMENU_BTN = '[data-widget="pushmenu"]'
const SELECTOR_LOGIN_BOX = '.login-box'
const SELECTOR_REGISTER_BOX = '.register-box'
+const SELECTOR_PRELOADER = '.preloader'
const CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_FOCUSED = 'sidebar-focused'
@@ -173,6 +174,13 @@ class Layout {
setTimeout(() => {
$('body.hold-transition').removeClass('hold-transition')
}, 50)
+ const $preloader = $(SELECTOR_PRELOADER)
+ if ($preloader) {
+ $preloader.css('height', 0)
+ setTimeout(() => {
+ $preloader.children().hide()
+ }, 200)
+ }
}
_max(numbers) {
diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss
index 7a8229c22d9..2cf857c4546 100644
--- a/build/scss/_layout.scss
+++ b/build/scss/_layout.scss
@@ -12,6 +12,20 @@ body,
min-height: 100%;
}
+.preloader {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: $main-bg;
+ height: 100vh;
+ width: 100%;
+ transition: height 200ms linear;
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: $zindex-preloader;
+}
+
.wrapper {
position: relative;
@@ -669,4 +683,8 @@ body:not(.layout-fixed) {
color: $white;
}
}
+ .preloader {
+ background-color: $dark;
+ color: $white;
+ }
}
diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss
index e3399affeaf..fd76e5f817e 100644
--- a/build/scss/_variables.scss
+++ b/build/scss/_variables.scss
@@ -170,6 +170,7 @@ $zindex-main-sidebar: $zindex-fixed + 8 !default;
$zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-toasts: $zindex-main-sidebar + 2 !default;
+$zindex-preloader: 9999 !default;
// TRANSITIONS SETTINGS
// --------------------------------------------------------
diff --git a/docs/layout.md b/docs/layout.md
index 591bbe9ec73..1ce6756e588 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -48,6 +48,23 @@ You can also use the following classes for responsive changes with placing
{: .quote-info}
+#### Preloader
+
+Preloader to avoid [https://github.com/ColorlibHQ/AdminLTE/discussions/3319](https://github.com/ColorlibHQ/AdminLTE/discussions/3319)
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+