Refactor layout transition handling and initialization logic

src/ts/adminlte.ts

@@ -15,13 +15,6 @@ import { initAccessibility } from './accessibility.js'
  */
 
 onDOMContentLoaded(() => {
-  /**
-   * Initialize AdminLTE Core Components
-   * -------------------------------
-   */
-  const layout = new Layout(document.body)
-  layout.holdTransition()
-
   /**
    * Initialize Accessibility Features - WCAG 2.1 AA Compliance
    * --------------------------------------------------------
@@ -33,14 +26,9 @@ onDOMContentLoaded(() => {
     keyboardNavigation: true,
     reducedMotion: true
   })
-  
+
   // Add semantic landmarks
   accessibilityManager.addLandmarks()
-
-  // Mark app as loaded after initialization
-  setTimeout(() => {
-    document.body.classList.add('app-loaded')
-  }, 400)
 })
 
 export {

src/ts/layout.ts

@@ -1,51 +1,78 @@
 /**
- * --------------------------------------------
+ * ----------------------------------------------------------------------------
  * @file AdminLTE layout.ts
  * @description Layout for AdminLTE.
  * @license MIT
- * --------------------------------------------
+ * ----------------------------------------------------------------------------
  */
 
 import {
   onDOMContentLoaded
 } from './util/index'
 
 /**
- * ------------------------------------------------------------------------
+ * ----------------------------------------------------------------------------
  * Constants
- * ------------------------------------------------------------------------
+ * ----------------------------------------------------------------------------
  */
 
 const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
 const CLASS_NAME_APP_LOADED = 'app-loaded'
 
 /**
+ * ----------------------------------------------------------------------------
  * Class Definition
- * ====================================================
+ * ----------------------------------------------------------------------------
  */
 
 class Layout {
   _element: HTMLElement
+  _holdTransitionTimer: ReturnType<typeof setTimeout> | undefined
 
   constructor(element: HTMLElement) {
     this._element = element
+    this._holdTransitionTimer = undefined
   }
 
-  holdTransition(): void {
-    let resizeTimer: ReturnType<typeof setTimeout>
-    window.addEventListener('resize', () => {
-      document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS)
-      clearTimeout(resizeTimer)
-      resizeTimer = setTimeout(() => {
-        document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS)
-      }, 400)
-    })
+  /*
+   * Hold the layout transitions by the specified time. This will disable CSS
+   * transitions and animations of the main layout elements (sidebar, navbar,
+   * content) for the given time.
+   *
+   * @param time Number of milliseconds to hold the transitions.
+   */
+  holdTransition(time: number = 100): void {
+    // If a timer is already running, clear it
+
+    if (this._holdTransitionTimer) {
+      clearTimeout(this._holdTransitionTimer)
+    }
+
+    // Add the hold-transition class to the body, and remove it after the
+    // specified time.
+
+    document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS)
+
+    this._holdTransitionTimer = setTimeout(() => {
+      document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS)
+    }, time)
   }
 }
 
+/**
+ * ----------------------------------------------------------------------------
+ * Data Api implementation
+ * ----------------------------------------------------------------------------
+ */
+
 onDOMContentLoaded(() => {
-  const data = new Layout(document.body)
-  data.holdTransition()
+  // Hold layout transitions on window resize.
+
+  const layout = new Layout(document.body)
+  window.addEventListener('resize', () => layout.holdTransition(200))
+
+  // Mark app as loaded after initialization.
+
   setTimeout(() => {
     document.body.classList.add(CLASS_NAME_APP_LOADED)
   }, 400)