[2.x] Fix <Deferred /> in Svelte adapter (#2037)

* Fix deferred reactivity

* Update React and Vue3 tests

* Update comment

Author: pedroborges

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 () => {

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 slot isn't loaded before the deferred props are available
+    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" />

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>

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-1">Page 1</Link>

tests/app/server.js

@@ -263,8 +263,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,