holidoit 1.0.162 → 1.0.164

package/dist/widgets/widget-booking-box.html

@@ -33,26 +33,119 @@
                 -webkit-overflow-scrolling: touch;
             }
 
-            /* Loading spinner fallback */
-            .widget-loading {
+            /* This mirrors BookingBoxLoadingSkeleton so loading the bundle does not change layout. */
+            .booking-box-loading-skeleton {
+                min-height: 760px;
+                max-width: 500px;
+                margin: 0 auto;
+                padding: 20px 20px 24px;
+                border-left: 1px solid #e2e8f0;
+                border-right: 1px solid #e2e8f0;
+                background: #fff;
+                animation: booking-box-loading-pulse 1.5s ease-in-out infinite;
+            }
+
+            .booking-box-loading-content {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .booking-box-loading-content {
+                gap: 12px;
+            }
+
+            .booking-box-loading-section {
+                padding: 12px;
+                border: 1px solid #e2e8f0;
+                border-radius: 12px;
+                box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+            }
+
+            .booking-box-loading-heading {
                 display: flex;
                 align-items: center;
-                justify-content: center;
-                min-height: 400px;
+                gap: 12px;
+            }
+
+            .booking-box-loading-tour .booking-box-loading-heading {
+                margin-bottom: 12px;
+            }
+
+            .booking-box-loading-tour-options {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            .booking-box-loading-tour-option {
+                height: 62px;
+                border-radius: 12px;
+                background: #f8fafc;
+            }
+
+            .booking-box-loading-calendar .booking-box-loading-heading {
+                margin-bottom: 20px;
             }
 
-            .widget-loading::after {
-                content: '';
-                width: 40px;
-                height: 40px;
-                border: 3px solid #e2e8f0;
-                border-top-color: #3b82f6;
-                border-radius: 50%;
-                animation: spin 1s linear infinite;
+            .booking-box-loading-icon {
+                width: 28px;
+                height: 28px;
+                flex: 0 0 auto;
+                border-radius: 9999px;
+                background: #f1f5f9;
             }
 
-            @keyframes spin {
-                to {
-                    transform: rotate(360deg);
+            .booking-box-loading-title,
+            .booking-box-loading-month {
+                height: 20px;
+                border-radius: 4px;
+                background: #f1f5f9;
+            }
+
+            .booking-box-loading-title {
+                width: 176px;
+            }
+
+            .booking-box-loading-calendar .booking-box-loading-title {
+                width: 160px;
+            }
+
+            .booking-box-loading-month {
+                width: 128px;
+                margin: 0 auto 20px;
+            }
+
+            .booking-box-loading-grid {
+                display: grid;
+                grid-template-columns: repeat(7, minmax(0, 1fr));
+                gap: 4px;
+            }
+
+            .booking-box-loading-cell {
+                height: 46px;
+                border-radius: 8px;
+                background: #f8fafc;
+            }
+
+            .booking-box-loading-action {
+                height: 72px;
+                border-radius: 12px;
+                background: #f1f5f9;
+            }
+
+            @media (max-width: 775px) {
+                .booking-box-loading-skeleton {
+                    padding-right: 12px;
+                    padding-left: 12px;
+                }
+            }
+
+            @keyframes booking-box-loading-pulse {
+                0%,
+                100% {
+                    opacity: 0.4;
+                }
+                50% {
+                    opacity: 0.2;
                 }
-            }</style></head><body><div id="holidoit-widget-root" class="widget-loading"></div><script defer="defer" src="./widget-booking-box.js"></script></body></html>
+            }</style></head><body><div id="holidoit-widget-root" class="booking-box-loading-skeleton" aria-busy="true"><div class="booking-box-loading-content"><div class="booking-box-loading-section booking-box-loading-tour"><div class="booking-box-loading-heading"><div class="booking-box-loading-icon"></div><div class="booking-box-loading-title"></div></div><div class="booking-box-loading-tour-options"><div class="booking-box-loading-tour-option"></div><div class="booking-box-loading-tour-option"></div></div></div><div class="booking-box-loading-section"><div class="booking-box-loading-heading"><div class="booking-box-loading-icon"></div><div class="booking-box-loading-title"></div></div></div><div class="booking-box-loading-section booking-box-loading-calendar"><div class="booking-box-loading-heading"><div class="booking-box-loading-icon"></div><div class="booking-box-loading-title"></div></div><div class="booking-box-loading-month"></div><div class="booking-box-loading-grid"><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div><div class="booking-box-loading-cell"></div></div></div><div class="booking-box-loading-action"></div></div></div><script defer="defer" src="../holidoit-js-releases/20260928135224166-07fe438b66bb-26ef6a21/widgets/widget-booking-box.js"></script></body></html>