chore: pending state

hi-ogawa · Apr 18, 2024 · 18a82b3 · 18a82b3
1 parent a1bf537
commit 18a82b3
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/examples/vue-ssr-extra/src/root.vue b/examples/vue-ssr-extra/src/root.vue
@@ -10,6 +10,8 @@ onMounted(() => {
 onUpdated(() => {
   updated.value++;
 });
+
+const suspended = ref(false);
 </script>
 
 <template>
@@ -21,6 +23,7 @@ onUpdated(() => {
     >
       GitHub
     </a>
+    <span v-if="suspended">...</span>
   </div>
   <div style="display: flex; align-items: center; gap: 0.5rem">
     mounted: {{ mounted }}, updated: {{ mounted }}
@@ -34,15 +37,17 @@ onUpdated(() => {
       <li>
         <RouterLink to="/client">Counter (client)</RouterLink>
       </li>
-      <li style="display: flex; gap: 0.5rem">
-        <RouterLink to="/server">Counter (server)</RouterLink>
-        <a href="/server?__nojs">(disable js)</a>
+      <li>
+        <span style="display: flex; gap: 0.5rem">
+          <RouterLink to="/server">Counter (server)</RouterLink>
+          <a href="/server?__nojs">(disable js)</a>
+        </span>
       </li>
     </ul>
   </nav>
   <main>
     <RouterView v-slot="{ Component }">
-      <Suspense>
+      <Suspense @pending="suspended = true" @resolve="suspended = false">
         <component :is="Component"></component>
       </Suspense>
     </RouterView>