From b0dfc82b83b1e6b8a5c9a18f2a1232756631a257 Mon Sep 17 00:00:00 2001
From: Santiago Cajal <s.cajalvarela@gmail.com>
Date: Wed, 29 Oct 2025 11:37:40 -0300
Subject: [PATCH 1/4] Refactor `Deferred` component to accept loading state in
 children callback and make fallback optional.

---
 packages/react/src/Deferred.ts                | 10 +++----
 .../Pages/DeferredProps/WithCallback.tsx      | 26 +++++++++++++++++++
 .../react/resources/js/Pages/Defer.tsx        |  6 ++---
 tests/app/server.js                           | 24 +++++++++++++++++
 tests/deferred-props.spec.ts                  | 14 ++++++++++
 5 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 packages/react/test-app/Pages/DeferredProps/WithCallback.tsx

diff --git a/packages/react/src/Deferred.ts b/packages/react/src/Deferred.ts
index 4cb09551b..3debab455 100644
--- a/packages/react/src/Deferred.ts
+++ b/packages/react/src/Deferred.ts
@@ -14,8 +14,8 @@ const isSameUrlWithoutHash = (url1: URL | Location, url2: URL | Location): boole
 }
 
 interface DeferredProps {
-  children: ReactNode | (() => ReactNode)
-  fallback: ReactNode | (() => ReactNode)
+  children: ReactNode | ((props: {loading: boolean}) => ReactNode)
+  fallback?: ReactNode | (() => ReactNode)
   data: string | string[]
 }
 
@@ -47,11 +47,11 @@ const Deferred = ({ children, data, fallback }: DeferredProps) => {
     setLoaded(keys.every((key) => pageProps[key] !== undefined))
   }, [pageProps, keys])
 
-  if (loaded) {
-    return typeof children === 'function' ? children() : children
+  if (! loaded && fallback) {
+    return typeof fallback === 'function' ? fallback() : fallback
   }
 
-  return typeof fallback === 'function' ? fallback() : fallback
+  return typeof children === 'function' ? children({ loading: !loaded }) : children
 }
 
 Deferred.displayName = 'InertiaDeferred'
diff --git a/packages/react/test-app/Pages/DeferredProps/WithCallback.tsx b/packages/react/test-app/Pages/DeferredProps/WithCallback.tsx
new file mode 100644
index 000000000..d944f97a6
--- /dev/null
+++ b/packages/react/test-app/Pages/DeferredProps/WithCallback.tsx
@@ -0,0 +1,26 @@
+import { Deferred, Link, usePage } from '@inertiajs/react'
+
+const Foo = () => {
+  const { foo } = usePage<{ foo?: { text: string } }>().props
+
+  return foo?.text
+}
+
+const Bar = () => {
+  const { bar } = usePage<{ bar?: { text: string } }>().props
+
+  return bar?.text
+}
+
+export default () => {
+  return (
+    <>
+      <Deferred data="foo">{({ loading }) => (loading ? <div>Loading foo (callback)...</div> : <Foo />)}</Deferred>
+
+      <Deferred data="bar">{({ loading }) => (loading ? <div>Loading bar (callback)...</div> : <Bar />)}</Deferred>
+
+      <Link href="/deferred-props/page-1">Page 1</Link>
+      <Link href="/deferred-props/page-2">Page 2</Link>
+    </>
+  )
+}
diff --git a/playgrounds/react/resources/js/Pages/Defer.tsx b/playgrounds/react/resources/js/Pages/Defer.tsx
index 4e01b2a3e..8a0bbe3f2 100644
--- a/playgrounds/react/resources/js/Pages/Defer.tsx
+++ b/playgrounds/react/resources/js/Pages/Defer.tsx
@@ -38,9 +38,9 @@ const Defer = ({
         </div>
 
         <div className="w-1/2 rounded-sm border border-gray-200 p-4">
-          {/* <Suspense fallback={<p>Loading Food...</p>}>
-            <DeferredFood />
-          </Suspense> */}
+          <Deferred data="users">
+            {({ loading }) => (loading ? <p>Loading Users (with callback)...</p> : <DeferredUsers />)}
+          </Deferred>
         </div>
 
         <div className="w-1/2 rounded-sm border border-gray-200 p-4">
diff --git a/tests/app/server.js b/tests/app/server.js
index f9238a104..7307657ef 100644
--- a/tests/app/server.js
+++ b/tests/app/server.js
@@ -634,6 +634,30 @@ app.get('/deferred-props/page-1', (req, res) => {
   )
 })
 
+app.get('/deferred-props/with-callback', (req, res) => {
+  if (!req.headers['x-inertia-partial-data']) {
+    return inertia.render(req, res, {
+      component: 'DeferredProps/WithCallback',
+      deferredProps: {
+        default: ['foo', 'bar'],
+      },
+      props: {},
+    })
+  }
+
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'DeferredProps/WithCallback',
+        props: {
+          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,
+  )
+})
+
 app.get('/deferred-props/with-partial-reload/:mode', (req, res) => {
   if (!req.headers['x-inertia-partial-data']) {
     return inertia.render(req, res, {
diff --git a/tests/deferred-props.spec.ts b/tests/deferred-props.spec.ts
index c6c7c6a56..3002e4d1d 100644
--- a/tests/deferred-props.spec.ts
+++ b/tests/deferred-props.spec.ts
@@ -197,3 +197,17 @@ test('load deferred props with partial reload on mount', async ({ page }) => {
   await expect(page.getByText('foo value')).toBeVisible()
   await expect(page.getByText('bar value')).toBeVisible()
 })
+
+test('load deferred props with callback', async ({ page }) => {
+  await page.goto('/deferred-props/with-callback')
+
+  await expect(page.getByText('Loading foo (callback)...')).toBeVisible()
+  await expect(page.getByText('Loading bar (callback)...')).toBeVisible()
+
+  await page.waitForResponse(page.url())
+
+  await expect(page.getByText('Loading foo (callback)...')).not.toBeVisible()
+  await expect(page.getByText('Loading bar (callback)...')).not.toBeVisible()
+  await expect(page.getByText('foo value')).toBeVisible()
+  await expect(page.getByText('bar value')).toBeVisible()
+})
\ No newline at end of file

From 0f95c9cae2137326998d3c8149653a1b267bdafc Mon Sep 17 00:00:00 2001
From: Santiago Cajal <s.cajalvarela@gmail.com>
Date: Wed, 29 Oct 2025 13:55:13 -0300
Subject: [PATCH 2/4] vue implementation

---
 packages/vue3/src/deferred.ts                 |  7 ++---
 .../Pages/DeferredProps/WithCallback.vue      | 27 +++++++++++++++++++
 playgrounds/vue3/resources/js/Pages/Defer.vue | 11 ++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 packages/vue3/test-app/Pages/DeferredProps/WithCallback.vue

diff --git a/packages/vue3/src/deferred.ts b/packages/vue3/src/deferred.ts
index 9557d5a33..fd1bb529e 100644
--- a/packages/vue3/src/deferred.ts
+++ b/packages/vue3/src/deferred.ts
@@ -10,11 +10,12 @@ export default defineComponent({
   },
   render() {
     const keys = (Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data]) as string[]
+    const loaded = keys.every((key) => this.$page.props[key] !== undefined)
 
-    if (!this.$slots.fallback) {
-      throw new Error('`<Deferred>` requires a `<template #fallback>` slot')
+    if (! loaded && this.$slots.fallback) {
+      return this.$slots.fallback()
     }
 
-    return keys.every((key) => this.$page.props[key] !== undefined) ? this.$slots.default?.() : this.$slots.fallback()
+    return this.$slots.default?.({ loading: !loaded })
   },
 })
diff --git a/packages/vue3/test-app/Pages/DeferredProps/WithCallback.vue b/packages/vue3/test-app/Pages/DeferredProps/WithCallback.vue
new file mode 100644
index 000000000..3d675877d
--- /dev/null
+++ b/packages/vue3/test-app/Pages/DeferredProps/WithCallback.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Deferred, Link } from '@inertiajs/vue3'
+
+defineProps<{
+  foo?: { text: string }
+  bar?: { text: string }
+}>()
+</script>
+
+<template>
+  <Deferred data="foo">
+    <template #default="{ loading }">
+      <div v-if="loading">Loading foo (callback)...</div>
+      <div v-else>{{ foo?.text }}</div>
+    </template>
+  </Deferred>
+
+  <Deferred data="bar">
+    <template #default="{ loading }">
+      <div v-if="loading">Loading bar (callback)...</div>
+      <div v-else>{{ bar?.text }}</div>
+    </template>
+  </Deferred>
+
+  <Link href="/deferred-props/page-1">Page 1</Link>
+  <Link href="/deferred-props/page-2">Page 2</Link>
+</template>
diff --git a/playgrounds/vue3/resources/js/Pages/Defer.vue b/playgrounds/vue3/resources/js/Pages/Defer.vue
index b828558b5..c41923dfc 100644
--- a/playgrounds/vue3/resources/js/Pages/Defer.vue
+++ b/playgrounds/vue3/resources/js/Pages/Defer.vue
@@ -81,6 +81,17 @@ defineProps<{
         </div>
       </Deferred>
     </TestGridItem>
+
+    <TestGridItem>
+      <Deferred data="users">
+        <template #default="{ loading }">
+          <p v-if="loading">Loading Users (with callback)...</p>
+          <div v-else v-for="user in users">
+            <p>#{{ user.id }}: {{ user.name }} ({{ user.email }})</p>
+          </div>
+        </template>
+      </Deferred>
+    </TestGridItem>
   </TestGrid>
 
   <div class="mt-72">

From b0027446fa1bd99011e0a0d49a0a24c639eeb389 Mon Sep 17 00:00:00 2001
From: Santiago Cajal <s.cajalvarela@gmail.com>
Date: Wed, 29 Oct 2025 14:04:39 -0300
Subject: [PATCH 3/4] Enhance `<Deferred>` component to allow loading state in
 children and add example usage in `Defer.svelte`.

---
 .../svelte/src/components/Deferred.svelte     | 10 +++-----
 .../Pages/DeferredProps/WithCallback.svelte   | 25 +++++++++++++++++++
 .../svelte4/resources/js/Pages/Defer.svelte   | 14 +++++++++++
 3 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 packages/svelte/test-app/Pages/DeferredProps/WithCallback.svelte

diff --git a/packages/svelte/src/components/Deferred.svelte b/packages/svelte/src/components/Deferred.svelte
index ab940cde9..9a8934914 100644
--- a/packages/svelte/src/components/Deferred.svelte
+++ b/packages/svelte/src/components/Deferred.svelte
@@ -21,14 +21,10 @@
       unsubscribe()
     })
   }
-
-  if (!$$slots.fallback) {
-    throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot')
-  }
 </script>
 
-{#if loaded}
-  <slot />
-{:else}
+{#if !loaded && $$slots.fallback}
   <slot name="fallback" />
+{:else}
+  <slot loading={!loaded} />
 {/if}
diff --git a/packages/svelte/test-app/Pages/DeferredProps/WithCallback.svelte b/packages/svelte/test-app/Pages/DeferredProps/WithCallback.svelte
new file mode 100644
index 000000000..e8f66e27d
--- /dev/null
+++ b/packages/svelte/test-app/Pages/DeferredProps/WithCallback.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Deferred, inertia } from '@inertiajs/svelte'
+
+  export let foo: { text: string } | undefined
+  export let bar: { text: string } | undefined
+</script>
+
+<Deferred data="foo" let:loading>
+  {#if loading}
+    <div>Loading foo (callback)...</div>
+  {:else}
+    {foo?.text}
+  {/if}
+</Deferred>
+
+<Deferred data="bar" let:loading>
+  {#if loading}
+    <div>Loading bar (callback)...</div>
+  {:else}
+    {bar?.text}
+  {/if}
+</Deferred>
+
+<a href="/deferred-props/page-1" use:inertia>Page 1</a>
+<a href="/deferred-props/page-2" use:inertia>Page 2</a>
diff --git a/playgrounds/svelte4/resources/js/Pages/Defer.svelte b/playgrounds/svelte4/resources/js/Pages/Defer.svelte
index 2c4ac5e59..98d8254ea 100644
--- a/playgrounds/svelte4/resources/js/Pages/Defer.svelte
+++ b/playgrounds/svelte4/resources/js/Pages/Defer.svelte
@@ -101,6 +101,20 @@
       </div>
     </Deferred>
   </TestGridItem>
+
+  <TestGridItem>
+    <Deferred data="users" let:loading>
+      {#if loading}
+        <p>Loading Users (callback)...</p>
+      {:else}
+        <div>
+          {#each users as user (user.id)}
+            <p>#{user.id}: {user.name} ({user.email})</p>
+          {/each}
+        </div>
+      {/if}
+    </Deferred>
+  </TestGridItem>
 </TestGrid>
 
 <div class="mt-72">

From d39cc112b02d79057863327fd81da019d5685104 Mon Sep 17 00:00:00 2001
From: Santiago Cajal <s.cajalvarela@gmail.com>
Date: Wed, 29 Oct 2025 14:10:45 -0300
Subject: [PATCH 4/4] Refactor whitespace in `<Deferred>` component and related
 files for consistency in loading state checks.

---
 packages/react/src/Deferred.ts | 4 ++--
 packages/vue3/src/deferred.ts  | 2 +-
 tests/deferred-props.spec.ts   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Deferred.ts b/packages/react/src/Deferred.ts
index 3debab455..d4bbab2a9 100644
--- a/packages/react/src/Deferred.ts
+++ b/packages/react/src/Deferred.ts
@@ -14,7 +14,7 @@ const isSameUrlWithoutHash = (url1: URL | Location, url2: URL | Location): boole
 }
 
 interface DeferredProps {
-  children: ReactNode | ((props: {loading: boolean}) => ReactNode)
+  children: ReactNode | ((props: { loading: boolean }) => ReactNode)
   fallback?: ReactNode | (() => ReactNode)
   data: string | string[]
 }
@@ -47,7 +47,7 @@ const Deferred = ({ children, data, fallback }: DeferredProps) => {
     setLoaded(keys.every((key) => pageProps[key] !== undefined))
   }, [pageProps, keys])
 
-  if (! loaded && fallback) {
+  if (!loaded && fallback) {
     return typeof fallback === 'function' ? fallback() : fallback
   }
 
diff --git a/packages/vue3/src/deferred.ts b/packages/vue3/src/deferred.ts
index fd1bb529e..8f4378b36 100644
--- a/packages/vue3/src/deferred.ts
+++ b/packages/vue3/src/deferred.ts
@@ -12,7 +12,7 @@ export default defineComponent({
     const keys = (Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data]) as string[]
     const loaded = keys.every((key) => this.$page.props[key] !== undefined)
 
-    if (! loaded && this.$slots.fallback) {
+    if (!loaded && this.$slots.fallback) {
       return this.$slots.fallback()
     }
 
diff --git a/tests/deferred-props.spec.ts b/tests/deferred-props.spec.ts
index 3002e4d1d..7f4e7cef5 100644
--- a/tests/deferred-props.spec.ts
+++ b/tests/deferred-props.spec.ts
@@ -210,4 +210,4 @@ test('load deferred props with callback', async ({ page }) => {
   await expect(page.getByText('Loading bar (callback)...')).not.toBeVisible()
   await expect(page.getByText('foo value')).toBeVisible()
   await expect(page.getByText('bar value')).toBeVisible()
-})
\ No newline at end of file
+})