pome-ui 2.0.0-preview52 → 2.0.0-preview53

package/package.json

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

package/pome-ui.dev.js

@@ -19598,27 +19598,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 +20162,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;