Bug: Company logo thumbnails enter corrupted render state after job application, stale DOM / z-index collision across job card components

Company thumbnails overlap other job cards after applying to a posting

Hey team,

I've been noticing a consistent visual bug on the platform. Every time I apply to a job posting, the company logo/thumbnail from that job bleeds over into the other job cards in the feed. Sometimes it stacks on top of the adjacent card's logo, sometimes it straight up replaces it. It looks pretty broken.

The weird part is that it fixes itself the moment I do a hard refresh. So the data coming from the backend seems fine, this is purely a client-side rendering issue.

Repro

1. Go to the job listings feed.
2. Apply to any job.
3. Come back to the listings (back nav or closing the apply modal).
4. The thumbnails on nearby job cards are now messed up; wrong logos, overlapping, stacked, etc.
5. Refresh the page → everything goes back to normal.

This happens every single time, not intermittent. I've tried it across a few different browsers (Chrome and Firefox) and it's the same behavior.

What I think is going on

I'm a software engineer so I poked around in devtools a bit. A few things that might be worth looking at:

Key prop issue on the list: If the job card list is keyed by array index instead of something stable like job.id, React's reconciler will reuse DOM nodes incorrectly when the list state changes after applying. This would explain why the thumbnails get "shifted" onto wrong cards. Classic React anti-pattern.

Stacking context / z-index leak: When the apply flow triggers (modal, overlay, toast, whatever), it might be setting position: absolute or bumping z-index on the applied card's thumbnail. If that style isn't cleaned up properly (maybe an animation callback that doesn't fire?), the image escapes its container and sits on top of siblings. Throwing overflow: hidden and position: relative on the card container would contain this.

Race condition on refetch: If applying fires off a POST and then the feed revalidates in parallel (SWR mutate(), React Query invalidateQueries(), etc.), there's a window where partial/stale data gets rendered before the fresh response lands. The thumbnails might be getting swapped around during that intermediate state.

Image caching: Less likely, but if there's a custom image component or service worker caching thumbnails by position/index instead of URL, a re-render after apply could serve the wrong cached image to the wrong card.

Quick fix suggestions

• Check that key={job.id} (or whatever unique identifier) is used on the card list, not key={index}.
• Make sure each card's thumbnail container has its own stacking context (position: relative; overflow: hidden;).
• If the apply action triggers a list refetch, batch the state update or wrap it in startTransition so you don't get an intermediate broken frame.
• Audit useEffect cleanups around the apply modal/overlay, something might not be resetting styles on unmount.

Environment

• Chrome 124 on macOS
• Desktop, standard resolution
• Happens on both fast and slow connections so it's not a network timing thing

Not a blocker since refresh fixes it, but it makes the platform look buggy and I'd imagine it's hurting trust with less technical users who don't know to just reload. Happy to provide more details or screen recordings if that helps.