Deferring expense logs loader data not working when navigating expense detail pages.

[andrelandgraf]

Describe the bug

Deferring expense logs loader data does not work when navigating between expense detail pages.

To Reproduce

Steps to reproduce the behavior:

1. Finish chapter 13.
2. Delay (setTimeout) the expenseLogs database query for better visibility (see p. 247).
3. Use the expense overview page (expenses list) to navigate between different expense details pages.
4. Notice that the navigation to the expense details page only happens after the expenseLogs data is fetched, not deferring the expenseLogs fetch request.

Expected behavior

When navigating between expense details pages, the navigation should happen after the expense is fetched, but should not await the expenseLogs promise. Instead, it should render the expense details page and show the fallback loading indication for the expenseLogs section.

Actual behavior

The navigation only happens after the expenseLogs promise resolves, not deferring the promise.

Additional context

When navigating from any other page to an expense details page (e.g., the income routes) or when performing a full-page reload, the deferring of the loader data works as expected. The bug only occurs when navigating between detail pages.

• Chapter: 13 Deferring Loader Data
• Explanation from the Remix team: https://github.com/remix-run/remix/issues/8256

[andrelandgraf]

Solution

We have to create a new Suspense boundary when navigating between expense details pages using the key property:

<Suspense fallback="Loading expense history..." key={expense.id}>
  <Await resolve={expenseLogs} errorElement="There was an error loading the expense history. Please try again.">
    {(resolvedExpenseLogs) => <ExpenseLogs expenseLogs={resolvedExpenseLogs} />}
  </Await>
</Suspense>

The key property now changes whenever we load the expense details page of another expense. This resets the Suspense boundary, which allows us to defer the new loader data.

Notice that we already do this in Chapter 6, Enhancing the User Experience, where we add a key property to our expense details Form component to reset the defaultValue on the input fields when navigating between expense details pages (p. 115).

The code for the book was fixed. You can find the change here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/commit/1bbef0c76c7cfcea4e4b62f677f843cb636da41d

Before

The suspense fallback is only shown once when initially navigating to an expense details page.

https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/assets/15163028/a40b6208-2b93-4049-b7d2-1609f73d31f0

After

The suspense fallback is shown on every expense details page navigation.

https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/assets/15163028/bd2af3c8-8104-4e09-822e-01019d92417d