holidoit 1.0.162 → 1.0.164

package/dist/widgets/widget-experience.html

@@ -33,26 +33,190 @@
                 -webkit-overflow-scrolling: touch;
             }
 
-            /* Loading spinner fallback */
-            .widget-loading {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                min-height: 600px;
+            /* First-frame skeleton shown before the widget bundle is ready */
+            .widget-page-loading,
+            .widget-booking-loading {
+                position: relative;
+                display: block;
+                width: 100%;
+                max-width: 1200px;
+                height: 1002px;
+                min-height: 1002px;
+                margin: 0 auto;
+                overflow: hidden;
             }
 
-            .widget-loading::after {
+            .widget-page-loading::before,
+            .widget-booking-loading::after {
                 content: '';
-                width: 40px;
-                height: 40px;
-                border: 3px solid #e2e8f0;
-                border-top-color: #3b82f6;
-                border-radius: 50%;
-                animation: spin 1s linear infinite;
+                display: block;
+                position: absolute;
+                z-index: 100;
+                top: 10px;
+                height: 874px;
+                border-radius: 12px;
+                animation: widget-loading-pulse 1.5s ease-in-out infinite;
+                will-change: opacity;
+            }
+
+            .widget-page-loading::before {
+                left: 10px;
+                width: calc(60% - 40px);
+                background:
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 100% 360px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 376px / min(100%, 480px) 24px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 408px / min(80%, 384px) 24px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 444px / min(100%, 287px) 31px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 491px / 100% 16px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 517px / 94% 16px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 0 543px / 96px 20px no-repeat,
+                    linear-gradient(#f8fafc, #f8fafc) 0 586px / 100% 66px no-repeat,
+                    linear-gradient(#f8fafc, #f8fafc) 0 660px / 100% 66px no-repeat,
+                    linear-gradient(#f8fafc, #f8fafc) 0 734px / 100% 66px no-repeat,
+                    linear-gradient(#f8fafc, #f8fafc) 0 808px / 100% 66px no-repeat;
+                background-color: #fff;
+            }
+
+            .widget-booking-loading::after {
+                top: 30px;
+                right: 0;
+                width: 40%;
+                height: 891px;
+                border: 1px solid #e2e8f0;
+                box-shadow: 0 8px 20px rgb(15 23 42 / 8%);
+                background:
+                    linear-gradient(#f8fafc, #f8fafc) 20px 20px / calc(100% - 40px) 185px no-repeat,
+                    linear-gradient(#f8fafc, #f8fafc) 20px 217px / calc(100% - 40px) 58px no-repeat,
+                    linear-gradient(#f8fafc, #f8fafc) 20px 287px / calc(100% - 40px) 390px no-repeat,
+                    linear-gradient(#f1f5f9, #f1f5f9) 20px 689px / calc(100% - 40px) 56px no-repeat;
+                background-color: #fff;
+            }
+
+            @media (max-width: 1024px) {
+                .widget-page-loading,
+                .widget-booking-loading {
+                    height: 2027px;
+                    min-height: 2027px;
+                }
+
+                .widget-page-loading::before {
+                    right: auto;
+                    left: 10px;
+                    width: calc(100% - 20px);
+                    height: 893px;
+                    background:
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 100% 360px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 376px / min(100%, 480px) 24px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 408px / min(80%, 384px) 24px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 444px / min(100%, 287px) 31px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 491px / 100% 16px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 518px / 94% 16px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 566px / 96px 20px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 605px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 679px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 753px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 827px / 100% 66px no-repeat;
+                    background-color: #fff;
+                }
+
+                .widget-booking-loading::after {
+                    top: 967px;
+                    right: auto;
+                    left: 0;
+                    width: 100%;
+                    height: 979px;
+                    background:
+                        linear-gradient(#f1f5f9, #f1f5f9) 20px 20px / 80px 24px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 20px 64px / calc(100% - 40px) 185px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 20px 261px / calc(100% - 40px) 58px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 20px 331px / calc(100% - 40px) 390px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 20px 733px / calc(100% - 40px) 56px no-repeat;
+                    background-color: #fff;
+                }
+            }
+
+            @media (max-width: 775px) {
+                .widget-page-loading,
+                .widget-booking-loading {
+                    height: 1923px;
+                    min-height: 1923px;
+                }
+
+                .widget-page-loading::before {
+                    right: auto;
+                    left: 2px;
+                    width: calc(100% - 4px);
+                    height: 874px;
+                    background:
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 100% 360px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 376px / min(100%, 480px) 24px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 408px / min(80%, 384px) 24px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 444px / min(100%, 287px) 31px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 491px / 100% 16px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 517px / 94% 16px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 547px / 96px 20px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 586px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 660px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 734px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 808px / 100% 66px no-repeat;
+                    background-color: #fff;
+                }
+
+                .widget-booking-loading::after {
+                    top: 916px;
+                    right: auto;
+                    left: 0;
+                    width: 100%;
+                    height: 921px;
+                    border: 0;
+                    border-radius: 0;
+                    box-shadow: none;
+                }
+            }
+
+            @media (max-width: 600px) {
+                .widget-page-loading,
+                .widget-booking-loading {
+                    height: 1863px;
+                    min-height: 1863px;
+                }
+
+                .widget-page-loading::before {
+                    right: auto;
+                    left: 2px;
+                    width: calc(100% - 4px);
+                    height: 814px;
+                    background:
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 100% 300px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 316px / 100% 24px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 348px / 80% 24px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 384px / min(100%, 287px) 31px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 431px / 100% 16px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 457px / 94% 16px no-repeat,
+                        linear-gradient(#f1f5f9, #f1f5f9) 0 483px / 96px 20px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 526px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 600px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 674px / 100% 66px no-repeat,
+                        linear-gradient(#f8fafc, #f8fafc) 0 748px / 100% 66px no-repeat;
+                    background-color: #fff;
+                }
+
+                .widget-booking-loading::after {
+                    top: 856px;
+                    right: auto;
+                    left: 0;
+                    width: 100%;
+                    height: 921px;
+                }
             }
 
-            @keyframes spin {
-                to {
-                    transform: rotate(360deg);
+            @keyframes widget-loading-pulse {
+                0%,
+                100% {
+                    opacity: 0.65;
+                }
+
+                50% {
+                    opacity: 0.4;
                 }
-            }</style></head><body><div id="holidoit-widget-root" class="widget-loading"></div><script defer="defer" src="./widget-experience.js"></script></body></html>
+            }</style></head><body><div id="holidoit-widget-root" class="widget-page-loading widget-booking-loading" aria-busy="true"></div><script defer="defer" src="../holidoit-js-releases/20260928135224166-07fe438b66bb-26ef6a21/widgets/widget-experience.js"></script></body></html>