Make the jump from a list to a detail view feel instant.

Picture the photos app on your phone. You're looking at a grid of little thumbnails, and you tap one to see it full size. In a great app, the photo is just there. In a lot of apps, you get a blank gray box for a beat while it loads. This isn't the most urgent bug on your list, nobody's getting paged over it. But this kind of polish is a big part of what makes an app feel good to use. So let's make that tap feel instant.

The wait you stopped noticing.

Here's what most apps do when you tap that thumbnail. The screen fills with gray, pulsing boxes where the photo and its details should be. That placeholder has a name, a skeleton, and the idea behind it is friendly enough. It tells you the app is working on it. But look at what you're actually waiting for. You were just looking at that photo in the grid. The app already had it. So why are you staring at a gray box to see something that was on your screen a second ago?

PreviewCode

Grid

Detail view

Photostap a photo →

No photo open

Tap a photo to open it here.

Photostap a photo →

function PhotoDetail({ id }: { id: number }) {
  const { data, isPending } = useQuery({
    queryKey: ["photo", id],
    queryFn: () => fetchPhoto(id),
  });

  // No seed. isPending stays true until the detail lands.
  if (isPending) return <DetailSkeleton />;
  return <Photo photo={data} />;
}

You already have most of it.

Think about what's in that grid for a second. Every thumbnail already shows you the photo, its caption, and who posted it. All of that is loaded and sitting right there before you tap anything. When you open it, the only genuinely new stuff is what comes with the full view: the likes, the comments, and the rest of the details. The app is already holding most of what the detail view needs.

You can see it in the real data below. The list on the left already gave you the caption and the author. The detail view on the right only adds the three highlighted fields. Everything else, you already had.

What approach do you think is best?

So the loading state is covering up stuff you already have. Once you see it, it's hard to unsee. How would you fix it? Go with your gut and pick one.

The naive fix.

My first instinct was the simple one. Just reuse the thumbnail's data to fill the page and skip the skeleton completely. You tap, the page shows up instantly, and it feels great. But notice what we just did. We told the user the page is done, while the new details are still quietly loading in the background. If that load is slow, or it fails, they have no idea. They're sitting there looking at a page that looks finished but isn't.

PreviewCode

Grid

Detail view

Photostap a photo →

No photo open

Tap a photo to open it here.

Photostap a photo →

function PhotoDetail({ id, fromList }: { id: number; fromList: Photo }) {
  const { data, isLoading } = useQuery({
    queryKey: ["photo", id],
    queryFn: () => fetchPhoto(id),
    initialData: fromList, // seed with the photo we already have
  });

  // initialData fills the cache, so isLoading is false.
  // This skeleton never renders.
  if (isLoading) return <DetailSkeleton />;
  return <Photo photo={data} />;
}

Where the quick fix falls apart.

The quick fix works most of the time. The page loads, the data fills in, everybody's happy. The trouble only shows up on a slow connection or when a request quietly fails. The page looked completely finished, so when the rest never arrives, nothing tells the user that something went wrong. They just sit there waiting on a screen that already looks done.

Why not show the part you already have?

Now the version that feels honest. Show the parts you already have right away, and put a skeleton only on what's still loading. The photo and its caption snap in instantly. The likes and comments fill in a moment later, each with its own little placeholder. Nothing pretends to be done before it is, and you get to watch the page come together the whole time.

PreviewCode

Grid

Detail view

Photostap a photo →

No photo open

Tap a photo to open it here.

Photostap a photo →

function PhotoDetail({ id, fromList }: { id: number; fromList: Photo }) {
  const { data, isFetching } = useQuery({
    queryKey: ["photo", id],
    queryFn: () => fetchPhoto(id),
    placeholderData: fromList, // shown on screen, never written to the cache
  });

  return (
    <Photo
      photo={data}
      // isFetching is true during the fetch, so the fields the list
      // didn't have show their own skeleton.
      loadingExtras={isFetching}
    />
  );
}

Anticipate intent with prefetch.

Now for my favorite part. Go back to that grid of photos. On a laptop the signal is easy. The moment someone's mouse drifts over a thumbnail, or they tab onto it, you know they're interested, so you start loading the full photo right then. By the time they click, it's already there.

But most of your users are on a phone, and a phone has no hover. So what's the signal there? Two good ones. The instant a finger presses down on a thumbnail, before it even lifts, you start loading. And for a much bigger head start, you fetch each photo as it scrolls into view, betting they'll open one of the photos right in front of them. Either way, the tap lands on something already loaded, and it still feels like the app read their mind.

PreviewCode

Grid

Detail view

Photoshover, then tap →

hover me

hover me

hover me

No photo open

Tap a photo to open it here.

Photosready before you tap →

queued

queued

queued

function PhotoRow({ photo }: { photo: Photo }) {
  const queryClient = useQueryClient();

  const prefetch = () =>
    queryClient.prefetchQuery({
      queryKey: ["photo", photo.id],
      queryFn: () => fetchPhoto(photo.id),
      staleTime: 60_000, // keep it fresh so the tap reuses it
    });

  return (
    <a
      href={`/photos/${photo.id}`}
      onPointerEnter={prefetch} // hover, on a laptop
      onPointerDown={prefetch}  // the press, on a phone
      onFocus={prefetch}        // keyboard
    >
      {photo.caption}
    </a>
  );
}

Taste is everything.

The exact tools will change from one project to the next, but the idea underneath stays the same. Show people what you already have, and when you can guess what they'll want next, start loading it a little early. None of it is dramatic. It's just the difference between an app that feels okay and one that feels great.

You made it to the end.

Quick recap of where we landed. Show what you already have, so the screen fills the moment it opens. Put a skeleton only on the parts that are still loading, so nothing pretends to be done before it is. And when you can guess what someone wants next, start loading it before they tap. Three small moves, and the jump from a list to a detail stops feeling like a page load.

Draft. The demos run on real @tanstack/react-query.