deploy: 3346d14

comparisons/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 

examples/bulk-update/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2461,7 +2462,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/delete-row/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2468,7 +2469,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/dialog-form/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2512,7 +2513,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/dialog/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2453,7 +2454,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/edit-row/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2499,7 +2500,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/filterable-content/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2475,7 +2476,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 

examples/infinite-scroll/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2516,7 +2517,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/inline-edit/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2494,7 +2495,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/inline-validation/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2450,7 +2451,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/instant-search/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2469,7 +2470,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/lazy-load/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2492,7 +2493,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/loading/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2493,7 +2494,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/notifications/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2481,7 +2482,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/progress-bar/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2480,7 +2481,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/server-events/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2477,7 +2478,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

examples/toggle-button/index.html

@@ -25,6 +25,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2423,7 +2424,7 @@ <h2>Demo</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })

index.html

@@ -23,6 +23,7 @@
       font-style: normal;
       font-display: swap;
     }
+    [x-cloak] { display: none }
   </style>
 
 
@@ -2517,7 +2518,7 @@ <h2 class="sr-only">A demonstration</h2>
   JavaScript to view this demo.
 </noscript>
 <div id="demo"></div>
-<div x-data="{
+<div x-cloak x-data="{
   init() {
     document.addEventListener('server:response', (event) => {
       this.requests.unshift({ id: this.requests.length, ...event.detail })