add tab loading screen with delay

build/js/IFrame.js

@@ -24,6 +24,7 @@ const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav
 const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
 const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
 const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
+const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
 const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item > a.nav-link'
 const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
 
@@ -35,7 +36,8 @@ const Default = {
     return item
   },
   autoIframeMode: true,
-  autoShowNewTab: true
+  autoShowNewTab: true,
+  loadingScreen: true
 }
 
 /**
@@ -72,7 +74,7 @@ class IFrame {
     $(SELECTOR_TAB_CONTENT).append(newTabItem)
 
     if (autoOpen) {
-      this.switchTab(`#${navId}`)
+      this.switchTab(`#${navId}`, this._config.loadingScreen)
     }
   }
 
@@ -93,13 +95,29 @@ class IFrame {
     this.createTab(title, link, this._config.autoShowNewTab)
   }
 
-  switchTab(item) {
+  switchTab(item, loadingScreen = null) {
     $(SELECTOR_TAB_EMPTY).hide()
-    $(SELECTOR_TAB_NAVBAR_NAV).find('.active').tab('dispose')
+    $(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
-    $(SELECTOR_TAB_NAVBAR_NAV).find('.active').removeClass('active')
     this._fixHeight()
-    $(item).tab('show')
+    const $item = $(item)
-    $(item).parents('li').addClass('active')
+
+    if (loadingScreen) {
+      const $loadingScreen = $(SELECTOR_TAB_LOADING)
+      $loadingScreen.fadeIn()
+      const tabId = $item.attr('href')
+      $(`${tabId} iframe`).ready(() => {
+        if (typeof loadingScreen === 'number') {
+          setTimeout(() => {
+            $loadingScreen.fadeOut()
+          }, loadingScreen)
+        } else {
+          $loadingScreen.fadeOut()
+        }
+      })
+    }
+
+    $item.tab('show')
+    $item.parents('li').addClass('active')
   }
 
   // Private
@@ -134,7 +152,7 @@ class IFrame {
     const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
     if (tabEmpty == true) {
       setTimeout(() => {
-        $(SELECTOR_TAB_EMPTY).height(contentWrapperHeight - navbarHeight)
+        $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(contentWrapperHeight - navbarHeight)
       }, 50)
     } else {
       $(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight - navbarHeight)

build/scss/pages/_iframe.scss

@@ -17,12 +17,31 @@ body.iframe-mode {
   height: 100%;
 
   &.iframe-mode {
+    .tab-content {
+      position: relative;
+    }
     .tab-empty {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
     }
+    .tab-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      display: none;
+      background-color: $main-bg;
+
+      > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+      }
+    }
 
     iframe {
       border: 0;

iframe.html

@@ -741,7 +741,7 @@
   </aside>
 
   <!-- Content Wrapper. Contains page content -->
-  <div class="content-wrapper iframe-mode" data-widget="iframe">
+  <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
     <div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
       <ul class="navbar-nav" role="tablist">
         <li class="nav-item" role="presentation">
@@ -753,6 +753,11 @@
       <div class="tab-empty">
         <h2 class="display-4">No tab selected!</h2>
       </div>
+      <div class="tab-loading">
+        <div>
+          <h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
+        </div>
+      </div>
     </div>
   </div>
   <!-- /.content-wrapper -->