From 801f2b4b7394af440bba3e4aa12d696a0b6a03c0 Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Mon, 14 Oct 2024 17:55:29 -0300
Subject: [PATCH 1/3] Fix deferred reactivity

---
 packages/svelte/src/components/Deferred.svelte    | 15 ++++++++++++++-
 .../test-app/Pages/DeferredProps/Page1.svelte     |  4 ++--
 tests/app/server.js                               |  4 ++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/components/Deferred.svelte b/packages/svelte/src/components/Deferred.svelte
index 92a367136..67f666b66 100644
--- a/packages/svelte/src/components/Deferred.svelte
+++ b/packages/svelte/src/components/Deferred.svelte
@@ -1,16 +1,29 @@
 <script lang="ts">
   import { page } from '../index'
+  import { onDestroy } from 'svelte'
 
   export let data: string | string[]
 
   const keys = Array.isArray(data) ? data : [data]
+  let loaded = false
+
+  const unsubscribe = page.subscribe(({ props }) => {
+    // Ensures the deferred slot isn't loaded before page props update
+    window.queueMicrotask(() => {
+      loaded = keys.every((key) => typeof props[key] !== 'undefined')
+    })
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
 
   if (!$$slots.fallback) {
     throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot')
   }
 </script>
 
-{#if keys.every((key) => $page.props[key] !== undefined)}
+{#if loaded}
   <slot />
 {:else}
   <slot name="fallback" />
diff --git a/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte b/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte
index e26b7d2c2..dd49a9877 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte
@@ -9,14 +9,14 @@
   <svelte:fragment slot="fallback">
     <div>Loading foo...</div>
   </svelte:fragment>
-  {foo}
+  {foo.text}
 </Deferred>
 
 <Deferred data="bar">
   <svelte:fragment slot="fallback">
     <div>Loading bar...</div>
   </svelte:fragment>
-  {bar}
+  {bar.text}
 </Deferred>
 
 <a href="/deferred-props/page-2" use:inertia>Page 2</a>
diff --git a/tests/app/server.js b/tests/app/server.js
index d2b718e9c..32c3ed4b0 100644
--- a/tests/app/server.js
+++ b/tests/app/server.js
@@ -262,8 +262,8 @@ app.get('/deferred-props/page-1', (req, res) => {
       inertia.render(req, res, {
         component: 'DeferredProps/Page1',
         props: {
-          foo: req.headers['x-inertia-partial-data']?.includes('foo') ? 'foo value' : undefined,
-          bar: req.headers['x-inertia-partial-data']?.includes('bar') ? 'bar value' : undefined,
+          foo: req.headers['x-inertia-partial-data']?.includes('foo') ? { text: 'foo value' } : undefined,
+          bar: req.headers['x-inertia-partial-data']?.includes('bar') ? { text: 'bar value' } : undefined,
         },
       }),
     500,

From 580802d9e4d2867d3ec03a71cf5a8cd023b3279c Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Tue, 15 Oct 2024 11:47:48 -0300
Subject: [PATCH 2/3] Update React and Vue3 tests

---
 packages/react/test-app/Pages/DeferredProps/Page1.jsx | 4 ++--
 packages/vue3/test-app/Pages/DeferredProps/Page1.vue  | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/test-app/Pages/DeferredProps/Page1.jsx b/packages/react/test-app/Pages/DeferredProps/Page1.jsx
index 0c5bcc2fe..f7c4bed00 100644
--- a/packages/react/test-app/Pages/DeferredProps/Page1.jsx
+++ b/packages/react/test-app/Pages/DeferredProps/Page1.jsx
@@ -3,13 +3,13 @@ import { Deferred, Link, usePage } from '@inertiajs/react'
 const Foo = () => {
   const { foo } = usePage().props
 
-  return foo
+  return foo.text
 }
 
 const Bar = () => {
   const { bar } = usePage().props
 
-  return bar
+  return bar.text
 }
 
 export default () => {
diff --git a/packages/vue3/test-app/Pages/DeferredProps/Page1.vue b/packages/vue3/test-app/Pages/DeferredProps/Page1.vue
index b9934b870..6e26be2eb 100644
--- a/packages/vue3/test-app/Pages/DeferredProps/Page1.vue
+++ b/packages/vue3/test-app/Pages/DeferredProps/Page1.vue
@@ -2,8 +2,8 @@
 import { Deferred, Link } from '@inertiajs/vue3'
 
 defineProps<{
-  foo?: string
-  bar?: string
+  foo?: {text: string }
+  bar?: {text: string }
 }>()
 </script>
 
@@ -12,14 +12,14 @@ defineProps<{
     <template #fallback>
       <div>Loading foo...</div>
     </template>
-    {{ foo }}
+    {{ foo?.text }}
   </Deferred>
 
   <Deferred data="bar">
     <template #fallback>
       <div>Loading bar...</div>
     </template>
-    {{ bar }}
+    {{ bar?.text }}
   </Deferred>
 
   <Link href="/deferred-props/page-2">Page 2</Link>

From cc6295eb2ee2f17ab2f3ecf06076d8c156e7fe58 Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Thu, 17 Oct 2024 10:43:55 -0300
Subject: [PATCH 3/3] Update comment

---
 packages/svelte/src/components/Deferred.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/components/Deferred.svelte b/packages/svelte/src/components/Deferred.svelte
index 67f666b66..9a8b3e483 100644
--- a/packages/svelte/src/components/Deferred.svelte
+++ b/packages/svelte/src/components/Deferred.svelte
@@ -8,7 +8,7 @@
   let loaded = false
 
   const unsubscribe = page.subscribe(({ props }) => {
-    // Ensures the deferred slot isn't loaded before page props update
+    // Ensures the slot isn't loaded before the deferred props are available
     window.queueMicrotask(() => {
       loaded = keys.every((key) => typeof props[key] !== 'undefined')
     })