pome-ui 2.0.0-preview52 → 2.0.0-preview54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pome-ui",
-  "version": "2.0.0-preview52",
+  "version": "2.0.0-preview54",
   "description": "Front-end MVC library",
   "main": "pome-ui.js",
   "bin": {

package/pome-skeleton.css

@@ -47,7 +47,7 @@
 ._pome-skeleton span._pome-sk-shimmer,
 ._pome-skeleton a._pome-sk-shimmer,
 ._pome-skeleton label._pome-sk-shimmer {
-    display: inline-block !important;
+    display: inline-block;
     min-width: 100px !important;
     min-height: 1em !important;
     border-radius: 4px !important;
@@ -64,7 +64,7 @@
 ._pome-skeleton li._pome-sk-shimmer,
 ._pome-skeleton blockquote._pome-sk-shimmer,
 ._pome-skeleton figcaption._pome-sk-shimmer {
-    display: block !important;
+    display: block;
     min-height: 1em !important;
     border-radius: 4px !important;
 }
@@ -92,7 +92,7 @@
 ._pome-skeleton input._pome-sk-shimmer,
 ._pome-skeleton textarea._pome-sk-shimmer,
 ._pome-skeleton select._pome-sk-shimmer {
-    display: inline-block !important;
+    display: inline-block;
     min-width: 80px !important;
     min-height: 1em !important;
     border-radius: 4px !important;

package/pome-ui.dev.js

@@ -18403,10 +18403,13 @@ function build(options, exports) {
     function _skeletonCleanupPass(node) {
         if (!node) return;
         if (node.nodeType === 1) {
-            // Strip Vue directives / bindings / event listeners
+            // Strip Vue directives / bindings / event listeners.
+            // Preserve v-show so CSS-driven responsive visibility still works
+            // (the skeleton lives inside a Vue-processed template).
             var attrsToRemove = [];
             for (var i = 0; i < node.attributes.length; i++) {
                 var attrName = node.attributes[i].name;
+                if (attrName === 'v-show') continue; // keep v-show for responsive toggling
                 if (attrName.indexOf('v-') === 0 || attrName[0] === '@' || attrName[0] === ':' || attrName[0] === '#') {
                     attrsToRemove.push(attrName);
                 }
@@ -19598,27 +19601,59 @@ function build(options, exports) {
                     this.createdPromise = ret;
                     if (options.skeleton) {
                         var self = this;
-                        // For skeleton + delayOpen: start the delayOpen animation
-                        // IMMEDIATELY so the skeleton fades in right away.
-                        if (options.delayOpen) {
-                            self.$nextTick(function () {
-                                requestAnimationFrame(function () {
+                        var skeletonShowing = false;
+                        var resolved = false;
+                        // Only activate the skeleton if the promise is still pending
+                        // after skeletonDelay ms.  If it resolves faster, skip the
+                        // skeleton entirely to avoid a flash.
+                        var skeletonDelay = typeof options.skeletonDelay === 'number'
+                            ? options.skeletonDelay : 1000;
+                        var skeletonTimer = setTimeout(function () {
+                            if (resolved) return;
+                            skeletonShowing = true;
+                            self.pomeSkeletonLoading = true;
+                            // Skeleton is now visible. If delayOpen is also set, kick
+                            // off its animation so it's primed when skeleton disappears.
+                            if (options.delayOpen) {
+                                self.$nextTick(function () {
                                     requestAnimationFrame(function () {
-                                        self.pomeDelayOpening = false;
+                                        requestAnimationFrame(function () {
+                                            self.pomeDelayOpening = false;
+                                        });
                                     });
+                                    setTimeout(function () {
+                                        self.pomeDelayOpened = false;
+                                    }, options.delayOpen);
                                 });
-                                setTimeout(function () {
-                                    self.pomeDelayOpened = false;
-                                }, options.delayOpen);
-                            });
-                        }
+                            }
+                        }, skeletonDelay);
                         ret.then(function () {
+                            resolved = true;
+                            clearTimeout(skeletonTimer);
                             self.pomeSkeletonLoading = false;
+                            // Fast path: resolved before skeleton appeared – still need
+                            // to run the delayOpen animation now.
+                            if (!skeletonShowing && options.delayOpen) {
+                                self.$nextTick(function () {
+                                    requestAnimationFrame(function () {
+                                        requestAnimationFrame(function () {
+                                            self.pomeDelayOpening = false;
+                                        });
+                                    });
+                                    setTimeout(function () {
+                                        self.pomeDelayOpened = false;
+                                    }, options.delayOpen);
+                                });
+                            }
                         }).catch(function (err) {
+                            resolved = true;
+                            clearTimeout(skeletonTimer);
+                            self.pomeSkeletonLoading = false;
                             console.error('[SKELETON] created Promise REJECTED:', err);
                         });
                     }
                 } else if (options.skeleton) {
+                    // Sync created – nothing to wait for, ensure skeleton is off.
                     this.pomeSkeletonLoading = false;
                 }
 
@@ -20130,7 +20165,9 @@ function build(options, exports) {
             var data = func1.call(this, app);
             var data2 = { pomeUiSubTitles: [] };
             if (opt.skeleton) {
-                data2.pomeSkeletonLoading = true;
+                // Start hidden; skeleton is only shown after skeletonDelay ms
+                // to avoid a flash when loading completes quickly.
+                data2.pomeSkeletonLoading = false;
             }
             if (opt.skeleton && opt.delayOpen) {
                 data2.pomeDelayOpened = true;