Showing Stale Data During Refresh

In the previous chapter, we saw that switching to another tab and returning triggers a data refetch. But from the user’s perspective, there’s no indication that a refresh is happening. The page looks exactly the same during the refetch. A common pattern for this scenario is to dim the existing content, giving users a subtle visual cue that fresh data is on its way.

The Waiting Property

When an effectful Atom refetches, useAtomSuspense does not suspend again by default. The component keeps rendering with the previous data while fresh data loads in the background. This is the behavior we want, but we need a way to know that a refetch is in progress.

The result returned by useAtomSuspense has a waiting property. When waiting is true, the Atom is refetching in the background. When the fetch completes, waiting becomes false.

Updating the User Grid

Update components/user-grid-suspense.tsx to pass the waiting boolean to each card:

1
"use client";
2

3
import { useAtomRefresh, useAtomSuspense } from "@effect-atom/atom-react";
4
import { Cause } from "effect";
5

6
import { FailureCard } from "@/components/failure-card";
7
import { UserSuccessCard } from "@/components/user-success-card";
8

9
import { getErrorInfo } from "@/lib/utils";
10
import { usersAtom } from "@/atoms/user";
11

12
export function UserGridSuspense() {
13
  const result = useAtomSuspense(usersAtom, { includeFailure: true });
14
  const refresh = useAtomRefresh(usersAtom);
15

16
  if (result._tag === "Failure") {
17
    const error = Cause.squash(result.cause);
18
    const { title, message } = getErrorInfo(error);
19

20
    return <FailureCard title={title} message={message} onRetry={refresh} />;
21
  }
22

23
  return (
24
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
25
      {result.value.map((user) => (
26
        <UserSuccessCard key={user.id} user={user} waiting={result.waiting} />
27
      ))}
28
    </div>
29
  );
30
}

result.waiting is true whenever the Atom is refetching in the background. We pass it to each UserSuccessCard. The card component is already configured to reduce its opacity when waiting is true, dimming the content to signal that fresh data is loading.

Testing the User Grid

1. Navigate to the home page and wait for the users to load.
2. Switch to a different browser tab.
3. Switch back to your app’s tab.

You’ll see the user cards briefly dim as the data refetches. Once the fresh data arrives, the cards return to full opacity.

Updating the User Detail Page

The same pattern applies to the user detail page. On this page, we render the UserDetail component, which uses Result.builder to handle the different states.

In the onSuccess handler, the second parameter is the Result itself, which includes the waiting boolean. Update components/user-detail.tsx to extract it and pass it to UserDetailsCard:

1
"use client";
2

3
import { useParams } from "next/navigation";
4
import { Result, useAtomValue } from "@effect-atom/atom-react";
5

6
import { FailureCard } from "@/components/failure-card";
7
import { UserDetailsCard } from "@/components/user-details-card";
8
import { UserGridSpinner } from "@/components/user-grid-spinner";
9

10
import { getErrorInfo } from "@/lib/utils";
11
import { userAtom } from "@/atoms/user";
12

13
export function UserDetail() {
14
  const params = useParams<{ id: string }>();
15
  const result = useAtomValue(userAtom(params.id));
16

17
  return Result.builder(result)
18
    .onInitial(() => <UserGridSpinner />)
19
    .onFailure((cause) => {
20
      const { title, message } = getErrorInfo(cause);
21
      return <FailureCard title={title} message={message} />;
22
    })
23
    .onSuccess((user, { waiting }) => (
24
      <UserDetailsCard user={user} waiting={waiting} />
25
    ))
26
    .render();
27
}

Like UserSuccessCard, UserDetailsCard is already configured to reduce its opacity when waiting is true.

Testing the User Detail Page

1. Click on any user card to navigate to their detail page.
2. Wait for the user details to load.
3. Switch to a different browser tab.
4. Switch back to your app’s tab.

You’ll see the user details card dim briefly as the data refetches, then return to full opacity when the fresh data arrives.