component.Base: afterSetIsLoading() => polished the logic & test a bi…

…t more (removeDom)
neomjs · Nov 30, 2023 · 5bb8646 · 5bb8646
1 parent 856639e
commit 5bb8646
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 31 deletions.
diff --git a/src/component/Base.mjs b/src/component/Base.mjs
@@ -199,6 +199,12 @@ class Base extends CoreBase {
          * @member {String|null} html_=null
          */
         html_: null,
+        /**
+         * Set to `true` to show a spinner centered in the component.
+         * Set to a string to show a message next to a spinner centered in the component.
+         * @member {Boolean|String} isLoading=false
+         */
+        isLoading_: false,
         /**
          * Internal flag which will get set to true while an update request (worker messages) is in progress
          * @member {Boolean} isVdomUpdating=false
@@ -342,13 +348,7 @@ class Base extends CoreBase {
          * The vdom markup for this component.
          * @member {Object} _vdom={}
          */
-        _vdom: {},
-        /**
-         * Set to `true` to show a spinner centered in the component.
-         * Set to a string to show a message next to a spinner centered in the component.
-         * @member {Boolean|String} isLoading=false
-         */
-        isLoading_: null
+        _vdom: {}
     }
 
     /**
@@ -659,37 +659,46 @@ class Base extends CoreBase {
         ComponentManager.register(this)
     }
 
-    afterSetIsLoading(value) {
-        const
-            { cls, vdom } = this,
-            maskIndex     = vdom.cn?.findIndex(c => c.cls === 'neo-load-mask') || -1;
+    /**
+     * Triggered after the isLoading config got changed
+     * @param {Boolean|String} value
+     * @param {Boolean|String} oldValue
+     * @protected
+     */
+    afterSetIsLoading(value, oldValue) {
+        let me            = this,
+            { cls, vdom } = me,
+            maskIndex;
 
-        // Remove the load mask
-        if (maskIndex !== -1) {
-            vdom.cn.splice(maskIndex, 1);
+        if (oldValue !== undefined && vdom.cn) {
+            maskIndex = vdom.cn.findIndex(c => c.cls.includes('neo-load-mask'));
+
+            // Remove the load mask
+            if (maskIndex !== -1) {
+                vdom.cn.splice(maskIndex, 1)
+            }
         }
 
         if (value) {
-            vdom.cn.push(this.loadMask = {
-                cls : 'neo-load-mask',
+            vdom.cn.push(me.loadMask = {
+                cls: ['neo-load-mask'],
                 cn : [{
-                    cls : 'neo-load-mask-body',
+                    cls: ['neo-load-mask-body'],
                     cn : [{
-                        cls : 'fa fa-spinner fa-spin'
+                        cls: ['fa', 'fa-spinner', 'fa-spin']
                     }, {
-                        cls  : 'neo-loading-message',
-                        html : typeof value === 'string' ? value : null
+                        cls      : ['neo-loading-message'],
+                        html     : value,
+                        removeDom: !Neo.isString(value)
                     }]
                 }]
-            });
-            NeoArray.add(cls, 'neo-masked');
-        }
-        else {
-            NeoArray.remove(cls, 'neo-masked');
+            })
         }
 
-        this.cls = cls
-        this.update();
+        NeoArray.toggle(cls, 'neo-masked', value);
+
+        me.cls = cls;
+        me.update()
     }
 
 

diff --git a/test/components/files/button/Base.mjs b/test/components/files/button/Base.mjs
@@ -3,7 +3,7 @@ StartTest(t => {
 
     t.beforeEach(async t => {
         button && await Neo.worker.App.destroyNeoInstance(button);
-        t.waitFor(50);
+        t.waitFor(20);
     });
 
     t.it('Sanity', async t => {
@@ -30,11 +30,11 @@ StartTest(t => {
 
         // Just a spinner now, no text
         await t.waitForSelectorNotFound('button .neo-loading-message:contains(Loading...)');
-        t.selectorExists('button .neo-loading-message:contains()');
+        t.selectorExists('button .fa-spinner');
 
         await Neo.worker.App.setConfigs({ id: button, isLoading : false });
 
-        // Not loading now,
-        await t.waitForSelectorNotFound('button .neo-load-mask');
+        // Not loading now
+        await t.waitForSelectorNotFound('button .fa-spinner');
     });
 });