pome-ui 2.0.0-preview50 → 2.0.0-preview52

package/pome-ui.dev.js

@@ -18196,6 +18196,274 @@ function build(options, exports) {
         document.head.appendChild(style);
     }
 
+    function _ensureSkeletonStyle() {
+        // pome-skeleton.css must be referenced by the host page manually.
+        // This function is kept as a hook point for future use.
+    }
+
+    // Registry: kebab-name → pre-rendered skeleton HTML string
+    var _componentSkeletonRegistry = {};
+
+    function _toKebabCase(name) {
+        // ScalableSidebar → scalable-sidebar, menuBar → menu-bar
+        return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+
+    function _registerComponentSkeleton(name, opt, rawHtml, skeletonFileHtml) {
+        // skeletonFileHtml: content of <component>.skeleton.html (takes top priority)
+        // opt.skeleton === string: inline HTML declared in the JS
+        // opt.skeleton === true: auto-generate from rawHtml
+        var hasFile    = !!skeletonFileHtml;
+        var hasInline  = opt && typeof opt.skeleton === 'string';
+        var hasAuto    = opt && opt.skeleton === true;
+        if (!hasFile && !hasInline && !hasAuto) return;
+        var kebab = _toKebabCase(name);
+        var skHtml = hasFile   ? skeletonFileHtml
+                   : hasInline ? opt.skeleton
+                   : _generateSkeletonHtml(rawHtml || (opt && opt.template) || '');
+        _componentSkeletonRegistry[kebab] = skHtml;
+    }
+
+    // --- Extract a plain numeric value from a bound attribute like :default-width="230" ---
+    function _extractBoundNumber(el, attr) {
+        var val = el.getAttribute(':' + attr);
+        if (!val) return null;
+        var m = val.match(/^(\d+(?:\.\d+)?)/);
+        return m ? m[1] : null;
+    }
+
+    // --- Known HTML tags for skeleton (custom components will be unwrapped) ---
+    var _knownHtmlTags = null;
+    function _isKnownHtmlTag(tag) {
+        if (!_knownHtmlTags) {
+            _knownHtmlTags = {};
+            'div,span,p,a,h1,h2,h3,h4,h5,h6,ul,ol,li,table,thead,tbody,tfoot,tr,td,th,colgroup,col,img,video,canvas,iframe,svg,form,input,textarea,select,option,button,label,section,article,aside,header,footer,nav,main,figure,figcaption,blockquote,pre,code,em,strong,i,b,u,small,sub,sup,br,hr,dl,dt,dd,details,summary,fieldset,legend,caption,abbr,cite,mark,time,address'.split(',').forEach(function(t) { _knownHtmlTags[t] = true; });
+        }
+        return !!_knownHtmlTags[tag];
+    }
+
+    function _generateSkeletonHtml(templateHtml) {
+        if (!templateHtml) return '';
+        var html = templateHtml;
+        // Remove Vue mustache expressions – replace with non-breaking space
+        html = html.replace(/\{\{[\s\S]*?\}\}/g, '\u00A0');
+        // Parse as DOM
+        var doc = new DOMParser().parseFromString(
+            '<div id="_pome-sk-wrap">' + html + '</div>', 'text/html'
+        );
+        var root = doc.getElementById('_pome-sk-wrap');
+        if (!root) return '';
+        // Pass 1 – structural: unwrap <template> slots, replace custom elements,
+        //   clone v-for rows, remove v-else branches
+        _skeletonStructurePass(root, doc);
+        // Pass 2 – cleanup: strip Vue directives, replace text with skeleton blocks
+        _skeletonCleanupPass(root);
+        return root.innerHTML;
+    }
+
+    function _wrapTemplateWithSkeleton(opt) {
+        if (!opt.skeleton || !opt.template) return;
+        _ensureSkeletonStyle();
+        var skeletonHtml = typeof opt.skeleton === 'string'
+            ? opt.skeleton
+            : _generateSkeletonHtml(opt.template);
+
+        var inner = '<template v-if="!pomeSkeletonLoading">' + opt.template
+            + '</template><div v-if="pomeSkeletonLoading" class="_pome-skeleton">'
+            + skeletonHtml + '</div>';
+
+        if (opt.delayOpen) {
+            // Wrap everything in a single div with reactive delayOpen classes
+            // so the delayOpen animation applies to both skeleton and real content.
+            opt.template = '<div :class="{\'_pome-ui-opened\': pomeDelayOpened, \'_pome-ui-opening\': pomeDelayOpening}">' + inner + '</div>';
+        } else {
+            opt.template = inner;
+        }
+    }
+
+    // --- Pass 1: structural transformations ---
+    function _skeletonStructurePass(node, doc) {
+        if (!node || node.nodeType !== 1) return;
+        var i = 0;
+        while (i < node.childNodes.length) {
+            var child = node.childNodes[i];
+            if (child.nodeType !== 1) { i++; continue; }
+            var tag = child.tagName.toLowerCase();
+
+            // 1. Handle <template> tags (Vue slots)
+            if (tag === 'template') {
+                // Determine slot name from #xxx or v-slot:xxx
+                var slotName = null;
+                for (var a = 0; a < child.attributes.length; a++) {
+                    var attr = child.attributes[a].name;
+                    if (attr[0] === '#') { slotName = attr.substring(1); break; }
+                    if (attr.indexOf('v-slot:') === 0) { slotName = attr.substring(7); break; }
+                }
+                // Only keep the default slot (or unnamed templates); discard others
+                if (slotName && slotName !== 'default') {
+                    node.removeChild(child);
+                    continue;
+                }
+                // Unwrap template content into parent
+                if (child.content) {
+                    var tplNodes = Array.from(child.content.childNodes);
+                    for (var j = 0; j < tplNodes.length; j++) {
+                        node.insertBefore(doc.importNode(tplNodes[j], true), child);
+                    }
+                }
+                node.removeChild(child);
+                continue; // re-examine index (new children inserted)
+            }
+
+            // 2. Remove v-else / v-else-if branches entirely
+            if (child.getAttribute('v-else') !== null || child.getAttribute('v-else-if') !== null) {
+                node.removeChild(child);
+                continue;
+            }
+
+            // 3. Handle v-for – clone element to simulate repeated rows
+            if (child.getAttribute('v-for')) {
+                child.removeAttribute('v-for');
+                var cloneCount = (tag === 'tr') ? 4 : (tag === 'li') ? 3 : 2;
+                var refNode = child.nextSibling;
+                for (var j = 0; j < cloneCount; j++) {
+                    var clone = child.cloneNode(true);
+                    node.insertBefore(clone, refNode);
+                }
+                // fall through to continue processing this element
+            }
+
+            // 4. Replace custom/unknown elements with <div>, keep children
+            if (!_isKnownHtmlTag(tag)) {
+                // Check if this component has declared its own skeleton
+                var registeredSkeleton = _componentSkeletonRegistry[tag];
+                if (registeredSkeleton) {
+                    // Parse the registered skeleton HTML and replace the element with it
+                    var skWrap = doc.createElement('div');
+                    skWrap.innerHTML = registeredSkeleton;
+                    if (child.getAttribute('class')) skWrap.setAttribute('class', child.getAttribute('class'));
+                    var existingStyleReg = child.getAttribute('style') || '';
+                    var styleExtraReg = '';
+                    var defWReg = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
+                    var minWReg = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
+                    if (defWReg) styleExtraReg += ';width:' + defWReg + 'px;flex-shrink:0';
+                    if (minWReg) styleExtraReg += ';min-width:' + minWReg + 'px';
+                    var combinedStyleReg = (existingStyleReg + styleExtraReg).replace(/^;+/, '');
+                    if (combinedStyleReg) skWrap.setAttribute('style', combinedStyleReg);
+                    // Replace the custom element with a wrapper containing the skeleton.
+                    // Use a fragment-like approach: move skWrap's children directly
+                    // so we don't add an extra div when the registered HTML already has one.
+                    var skNodes = Array.from(skWrap.childNodes);
+                    if (skNodes.length === 1 && skNodes[0].nodeType === 1) {
+                        var skRoot = skNodes[0];
+                        // Merge class / style from host element onto the single root node
+                        if (child.getAttribute('class')) skRoot.classList && skRoot.setAttribute('class', (skRoot.getAttribute('class') || '') + ' ' + child.getAttribute('class'));
+                        if (combinedStyleReg) skRoot.setAttribute('style', (skRoot.getAttribute('style') ? skRoot.getAttribute('style') + ';' : '') + combinedStyleReg);
+                        node.replaceChild(skRoot, child);
+                        i++;
+                    } else {
+                        while (skWrap.firstChild) node.insertBefore(skWrap.firstChild, child);
+                        node.removeChild(child);
+                        // i stays the same since we removed child and inserted nodes before it
+                    }
+                    continue;
+                }
+
+                var div = doc.createElement('div');
+                if (child.getAttribute('class')) div.setAttribute('class', child.getAttribute('class'));
+
+                // Reconstruct inline style, preserving explicit style + any bound sizing attrs
+                var existingStyle = child.getAttribute('style') || '';
+                var styleExtra = '';
+                // :default-width / default-width → width + flex-shrink:0 so sidebar-like
+                // components keep their width in the skeleton
+                var defW = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
+                var minW = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
+                var maxW = _extractBoundNumber(child, 'max-width') || child.getAttribute('max-width');
+                if (defW) styleExtra += ';width:' + defW + 'px;flex-shrink:0';
+                if (minW) styleExtra += ';min-width:' + minW + 'px';
+                if (maxW) styleExtra += ';max-width:' + maxW + 'px';
+                var combinedStyle = (existingStyle + styleExtra).replace(/^;+/, '');
+                if (combinedStyle) div.setAttribute('style', combinedStyle);
+
+                while (child.firstChild) div.appendChild(child.firstChild);
+                node.replaceChild(div, child);
+                _skeletonStructurePass(div, doc); // recurse into replacement
+                i++;
+                continue;
+            }
+
+            // 5. Recurse into known elements
+            _skeletonStructurePass(child, doc);
+            i++;
+        }
+    }
+
+    // --- Pass 2: cleanup directives, replace text, handle media ---
+    function _skeletonCleanupPass(node) {
+        if (!node) return;
+        if (node.nodeType === 1) {
+            // Strip Vue directives / bindings / event listeners
+            var attrsToRemove = [];
+            for (var i = 0; i < node.attributes.length; i++) {
+                var attrName = node.attributes[i].name;
+                if (attrName.indexOf('v-') === 0 || attrName[0] === '@' || attrName[0] === ':' || attrName[0] === '#') {
+                    attrsToRemove.push(attrName);
+                }
+            }
+            for (var i = 0; i < attrsToRemove.length; i++) {
+                node.removeAttribute(attrsToRemove[i]);
+            }
+            // Remove delayOpen classes
+            node.classList.remove('_pome-ui-opened');
+            node.classList.remove('_pome-ui-opening');
+            // Add shimmer class to leaf-level text containers
+            var tag = node.tagName.toLowerCase();
+            var shimmerTags = {span:1,a:1,p:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,li:1,label:1,button:1,input:1,textarea:1,select:1,dt:1,dd:1,figcaption:1,blockquote:1};
+            if (shimmerTags[tag]) {
+                node.classList.add('_pome-sk-shimmer');
+            }
+            if (tag === 'img') {
+                // Replace img with a shimmer skeleton block that preserves dimensions
+                var imgBlock = node.ownerDocument.createElement('span');
+                imgBlock.className = '_pome-sk-img';
+                // Preserve sizing from class or explicit attributes
+                if (node.getAttribute('class')) imgBlock.className += ' ' + node.getAttribute('class');
+                if (node.getAttribute('width')) imgBlock.style.width = node.getAttribute('width') + (/\d$/.test(node.getAttribute('width')) ? 'px' : '');
+                else imgBlock.style.width = '24px';
+                if (node.getAttribute('height')) imgBlock.style.height = node.getAttribute('height') + (/\d$/.test(node.getAttribute('height')) ? 'px' : '');
+                else imgBlock.style.height = '24px';
+                node.parentNode.replaceChild(imgBlock, node);
+                return; // node replaced, skip children
+            }
+            if (tag === 'video' || tag === 'canvas' || tag === 'iframe') {
+                node.removeAttribute('src');
+                node.removeAttribute('srcset');
+                node.style.backgroundColor = '#e8e8e8';
+                node.style.borderRadius = '4px';
+            }
+        }
+        var children = Array.from(node.childNodes);
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child.nodeType === 3) { // text node
+                // \u00A0 comes from mustache replacement – treat it as content
+                var text = child.textContent.replace(/[\s\u00A0]+/g, '');
+                var hasNbsp = child.textContent.indexOf('\u00A0') >= 0;
+                if (text || hasNbsp) {
+                    var parentTag = child.parentNode && child.parentNode.tagName
+                        ? child.parentNode.tagName.toLowerCase() : '';
+                    var block = child.ownerDocument.createElement('span');
+                    block.className = '_pome-sk-block';
+                    block.innerHTML = '\u00A0';
+                    child.parentNode.replaceChild(block, child);
+                }
+            } else if (child.nodeType === 1) {
+                _skeletonCleanupPass(child);
+            }
+        }
+    }
+
     function _httpCached(url) {
         return !!_cache[url];
     }
@@ -18238,6 +18506,24 @@ function build(options, exports) {
             });
     };
 
+    // Fetch a .skeleton.html file, returning null when the file does not
+    // physically exist. Unlike _httpGet, this guards against SPA catch-all
+    // routes that return the app entry page (status 200) for any URL:
+    // if the response body starts with "<!DOCTYPE" or "<html" it is treated
+    // as a missing file and null is returned.
+    function _httpGetSkeletonFile(url) {
+        return _httpGet(url).then(function (text) {
+            if (!text) return null;
+            var trimmed = text.replace(/^[\s\uFEFF]+/, ''); // strip BOM / whitespace
+            if (/^<!DOCTYPE/i.test(trimmed) || /^<html/i.test(trimmed)) {
+                return null; // SPA fallback page, not a real skeleton file
+            }
+            return text;
+        }).catch(function () {
+            return null;
+        });
+    };
+
     function _serializeOptionsToUrl(options) {
         var fields = Object.getOwnPropertyNames(options);
         var str = '';
@@ -18458,19 +18744,27 @@ function build(options, exports) {
                 });
             })
             .then(function (component) {
-                var promise = null;
+                var htmlPromise;
                 if (mobile) {
-                    promise = _httpExist(url + '.m.html').then(function (res) {
+                    htmlPromise = _httpExist(url + '.m.html').then(function (res) {
                         return _httpGet(url + (res ? '.m.html' : '.html'));
                     });
                 } else {
-                    promise = _httpGet(url + '.html');
+                    htmlPromise = _httpGet(url + '.html');
                 }
+                // Load .skeleton.html in parallel; null if not found
+                var skeletonFilePromise = _httpGetSkeletonFile(url + '.skeleton.html');
 
-                return promise.then(function (template) {
+                return Promise.all([htmlPromise, skeletonFilePromise]).then(function (results) {
+                    var template = results[0];
+                    var skeletonFileHtml = results[1];
                     if (!component.template) {
                         component.template = _sanitizeTemplate(template);
                     }
+                    // .skeleton.html file takes top priority over skeleton: true / inline string
+                    if (skeletonFileHtml && component.skeleton) {
+                        component.skeleton = skeletonFileHtml;
+                    }
                     if (component.delayOpen) {
                         var dom = new DOMParser().parseFromString(component.template, 'text/html');
                         var children = dom.querySelector('body').children;
@@ -18481,14 +18775,22 @@ function build(options, exports) {
                             if (children[i].getAttribute('v-if') != null || children[i].getAttribute('v-else-if') || children[i].getAttribute('v-else')) {
                                 continue;
                             }
-                            children[i].classList.add('_pome-ui-opened');
-                            children[i].classList.add('_pome-ui-opening');
+                            if (component.skeleton) {
+                                // Skeleton mode: delayOpen classes will be added by
+                                // _wrapTemplateWithSkeleton on an outer wrapper div.
+                                // No need to add them to individual children here.
+                            } else {
+                                children[i].classList.add('_pome-ui-opened');
+                                children[i].classList.add('_pome-ui-opening');
+                            }
                         }
 
                         var ret = template.indexOf('<html') >= 0 ? new XMLSerializer().serializeToString(dom) : dom.querySelector('body').innerHTML;
                         component.template = ret;
                     }
                     _patchComponent(url, component);
+                    // _wrapTemplateWithSkeleton is deferred to after _loadComponents
+                    // so the component skeleton registry is fully populated.
                     return Promise.resolve(component);
                 });
             })
@@ -18522,6 +18824,8 @@ function build(options, exports) {
 
                     return Promise.all([pageCssPromise, _loadComponents(components, url)]).then(function (results) {
                         var components = results[1];
+                        // Wrap skeleton template now that component registry is fully populated.
+                        _wrapTemplateWithSkeleton(component);
                         var ret = Vue.createApp(component);
 
                         for (var i = 0; i < components.length; ++i) {
@@ -18751,6 +19055,48 @@ function build(options, exports) {
 
             return _loadComponents(options.components || [], layout)
                 .then(function (components) {
+                    // Inject layout skeleton overlay now that component registry is populated.
+                    if (options._pomeLayoutSkeleton) {
+                        var ls = options._pomeLayoutSkeleton;
+                        var skHtml = ls.skeletonOverride
+                            ? ls.skeletonOverride
+                            : (function () {
+                                var html = _generateSkeletonHtml(ls.skeletonBody);
+                                // Post-process: remove empty top-level nodes (modals etc.),
+                                // set flex:1 on the main content area next to the sidebar.
+                                var tmp = document.createElement('div');
+                                tmp.innerHTML = html;
+                                var topChildren = Array.from(tmp.children);
+                                var sidebarIdx = -1;
+                                for (var ci = 0; ci < topChildren.length; ci++) {
+                                    var ch = topChildren[ci];
+                                    if (!ch.innerHTML.trim()) {
+                                        tmp.removeChild(ch);
+                                        topChildren = Array.from(tmp.children);
+                                        ci--;
+                                        continue;
+                                    }
+                                    if (sidebarIdx < 0 && /\bwidth\s*:/.test(ch.getAttribute('style') || '')) {
+                                        sidebarIdx = ci;
+                                    } else if (sidebarIdx >= 0 && ci === sidebarIdx + 1) {
+                                        ch.style.flex = '1';
+                                        ch.style.minWidth = '0';
+                                        ch.style.overflow = 'hidden';
+                                    }
+                                }
+                                return tmp.innerHTML;
+                            })();
+                        var appEl = document.querySelector(ls.appId);
+                        if (appEl) {
+                            var skDiv = document.createElement('div');
+                            skDiv.setAttribute('v-if', 'pomeSkeletonLoading');
+                            skDiv.className = '_pome-skeleton _pome-layout-skeleton ' + ls.bodyClass;
+                            if (ls.overlayStyle) skDiv.setAttribute('style', ls.overlayStyle);
+                            skDiv.innerHTML = skHtml;
+                            appEl.insertBefore(skDiv, appEl.firstChild);
+                        }
+                        delete options._pomeLayoutSkeleton;
+                    }
                     var app = Vue.createApp(options || {});
                     for (var i = 0; i < components.length; ++i) {
                         var com = components[i];
@@ -19229,24 +19575,51 @@ function build(options, exports) {
             options.created = function () { };
         }
 
-        if (options.style) {
+        if (options.style || options.skeleton) {
             var originalCreated = options.created;
             options.created = function () {
-                if (!_css[view]) {
-                    _css[view] = 0;
-                }
-                if (_css[view] == 0) {
-                    if (_options.preloadCss) {
-                        this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
-                    } else {
-                        appendCssReference(view, options.style);
+                if (options.style) {
+                    if (!_css[view]) {
+                        _css[view] = 0;
                     }
+                    if (_css[view] == 0) {
+                        if (_options.preloadCss) {
+                            this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
+                        } else {
+                            appendCssReference(view, options.style);
+                        }
+                    }
+                    ++_css[view];
                 }
-                ++_css[view];
+
                 this.createdPromise = Promise.resolve();
                 var ret = originalCreated.call(this);
                 if (ret instanceof Promise) {
                     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 () {
+                                    requestAnimationFrame(function () {
+                                        self.pomeDelayOpening = false;
+                                    });
+                                });
+                                setTimeout(function () {
+                                    self.pomeDelayOpened = false;
+                                }, options.delayOpen);
+                            });
+                        }
+                        ret.then(function () {
+                            self.pomeSkeletonLoading = false;
+                        }).catch(function (err) {
+                            console.error('[SKELETON] created Promise REJECTED:', err);
+                        });
+                    }
+                } else if (options.skeleton) {
+                    this.pomeSkeletonLoading = false;
                 }
 
                 return ret;
@@ -19268,11 +19641,12 @@ function build(options, exports) {
             }
 
             // Remove opening class if needed
-            if (options.delayOpen) {
+            if (options.delayOpen && !options.skeleton) {
                 var self = this;
-                (self.createdPromise || Promise.resolve()).then(function () {
+                var delayOpenFunc = function () {
                     requestAnimationFrame(function () {
                         requestAnimationFrame(function () {
+                            if (!self.$el || !self.$el.parentNode) return;
                             var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
                             for (var i = 0; i < doms.length; ++i) {
                                 doms[i].classList.remove('_pome-ui-opening');
@@ -19281,11 +19655,16 @@ function build(options, exports) {
                     });
 
                     setTimeout(function () {
+                        if (!self.$el || !self.$el.parentNode) return;
                         var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opened');
                         for (var i = 0; i < doms.length; ++i) {
                             doms[i].classList.remove('_pome-ui-opened');
                         }
                     }, options.delayOpen);
+                };
+
+                (self.createdPromise || Promise.resolve()).then(function () {
+                    delayOpenFunc();
                 });
             }
 
@@ -19294,14 +19673,16 @@ function build(options, exports) {
 
         var originalUnmounted = options.unmounted;
         options.unmounted = function () {
-            if (!_css[view]) {
-                return;
-            }
+            if (options.style) {
+                if (!_css[view]) {
+                    return originalUnmounted.call(this);
+                }
 
-            --_css[view];
-            if (_css[view] <= 0) {
-                removeCssReference(view);
-                delete _css[view];
+                --_css[view];
+                if (_css[view] <= 0) {
+                    removeCssReference(view);
+                    delete _css[view];
+                }
             }
             return originalUnmounted.call(this);
         };
@@ -19377,9 +19758,17 @@ function build(options, exports) {
             if (layout) {
                 var layoutName = layout + (mobile ? '.m' : '');
                 var _layoutHtml;
-                return _httpGet(layoutName + '.html').then(function (layoutHtml) {
-                    _layoutHtml = layoutHtml;
-                    return _httpGet(layout + ".js");
+                var _layoutSkeletonFileHtml; // hoisted so LayoutNext closure can access it
+                // Load layout .html, .js and optional .skeleton.html all in parallel
+                return Promise.all([
+                    _httpGet(layoutName + '.html'),
+                    _httpGet(layout + '.js'),
+                    _httpGetSkeletonFile(layoutName + '.skeleton.html')
+                ]).then(function (layoutResults) {
+                    _layoutHtml = layoutResults[0];
+                    var js = layoutResults[1];
+                    _layoutSkeletonFileHtml = layoutResults[2]; // null when absent
+                    return js;
                 }).then(function (js) {
                     var _opt = null;
                     var Layout = function (options) {
@@ -19403,6 +19792,37 @@ function build(options, exports) {
                         var appId = 'pomelo-' + ticks;
                         var containerId = 'container-' + ticks;
                         var body = document.querySelector('body').innerHTML.replace('<render-body></render-body>', '<div id="' + containerId + '"></div>');
+                        // Layout skeleton: defer generation to Root→_loadComponents so the
+                        // component skeleton registry is fully populated before we generate HTML.
+                        if (options.skeleton) {
+                            _ensureSkeletonStyle();
+                            var bodyEl = document.querySelector('body');
+                            var bodyClass = bodyEl.getAttribute('class') || '';
+                            var bodyInlineStyle = bodyEl.getAttribute('style') || '';
+                            var bodyComputed = window.getComputedStyle(bodyEl);
+                            var overlayStyle = bodyInlineStyle;
+                            if (bodyComputed.display && bodyComputed.display.indexOf('flex') >= 0) {
+                                if (overlayStyle) overlayStyle += ';';
+                                overlayStyle += 'display:' + bodyComputed.display
+                                    + ';flex-direction:' + bodyComputed.flexDirection
+                                    + ';align-items:' + bodyComputed.alignItems;
+                            } else {
+                                if (overlayStyle) overlayStyle += ';';
+                                overlayStyle += 'display:flex;flex-direction:row;align-items:stretch';
+                            }
+                            var skeletonBody = body.replace('<div id="' + containerId + '"></div>', '<div style="flex:1;min-width:0"></div>');
+                            // Store pending data; Root will inject the overlay div after
+                            // _loadComponents so registered component skeletons are available.
+                            options._pomeLayoutSkeleton = {
+                                appId: '#' + appId,
+                                bodyClass: bodyClass,
+                                overlayStyle: overlayStyle,
+                                skeletonBody: skeletonBody,
+                                // Priority: .skeleton.html file > inline string in JS
+                                skeletonOverride: _layoutSkeletonFileHtml
+                                    || (typeof options.skeleton === 'string' ? options.skeleton : null)
+                            };
+                        }
                         _ensureVueCloakStyle();
                         document.querySelector('body').innerHTML = '<div id="' + appId + '" class="_pome-vue-cloak">' + body + '</div>';
                         options.template = null;
@@ -19576,10 +19996,15 @@ function build(options, exports) {
             var _html;
             var _name;
             var _opt;
-            return _httpGet(c + ".html").then(function (comHtml) {
-                _html = comHtml;
-                return _httpGet(c + ".js");
-            }).then(function (comJs) {
+            // Load .html, .js and optional .skeleton.html in parallel
+            return Promise.all([
+                _httpGet(c + '.html'),
+                _httpGet(c + '.js'),
+                _httpGetSkeletonFile(c + '.skeleton.html')
+            ]).then(function (results) {
+                _html = results[0];
+                var comJs = results[1];
+                var skeletonFileHtml = results[2]; // null when file does not exist
                 var Component = function (name, options) {
                     _opt = options;
                     _name = name;
@@ -19593,6 +20018,10 @@ function build(options, exports) {
                 }
                 _hookSetup(_opt);
                 _patchComponent(c, _opt);
+                // Register the component's skeleton BEFORE wrapping the template,
+                // so _generateSkeletonHtml still sees the clean original template.
+                _registerComponentSkeleton(_name, _opt, _opt.template, skeletonFileHtml);
+                _wrapTemplateWithSkeleton(_opt);
                 _hookData(_opt);
                 var cssPreloadPromise = Promise.resolve();
                 if (_options.preloadCss && _opt.style) {
@@ -19700,6 +20129,13 @@ function build(options, exports) {
         opt.data = function (app) {
             var data = func1.call(this, app);
             var data2 = { pomeUiSubTitles: [] };
+            if (opt.skeleton) {
+                data2.pomeSkeletonLoading = true;
+            }
+            if (opt.skeleton && opt.delayOpen) {
+                data2.pomeDelayOpened = true;
+                data2.pomeDelayOpening = true;
+            }
             _combineObject(data2, data);
             return data;
         }