I'm experiencing an issue with Suspense fallback UI not showing when calling router.refresh() in my Next.js application. Here are the key points:
1. Environment: Next.js 14, deployed on AWS Amplify
2. Issue: When router.refresh() is called (triggered by window focus event), the Suspense fallback UI doesn't show up as expected.
3. Inconsistency: The fallback UI works correctly in the local development environment but fails to appear when deployed on Amplify.
4. Current Implementation:
- Using WindowFocusRefresh component to trigger router.refresh() on window focus.
- Suspense wrapper with a random key: <Suspense key={Math.random()} fallback={<TicketBarFallback />}>
- Server Component for data fetching (TicketBar component)
5. Expected Behavior: The Suspense fallback UI should appear briefly when the page regains focus and router.refresh() is called, indicating that data is being refetched.


function WindowFocusRefresh({ children }: PropsWithChildren) {
const router = useRouter();

useLayoutEffect(() => {
const onFocus = () => {
router.refresh();
};

window.addEventListener("visibilitychange", onFocus);

return () => {
window.removeEventListener("visibilitychange", onFocus);
};
}, [router]);

return #Unknown Channel{children}</>;
}

export default WindowFocusRefresh;

———
page.tsx
<Suspense key={Math.random()} fallback={<TicketBarLoading />}>
<TicketBar customerId={customerId} />
</Suspense>

——

async function TicketBar({ customerId }: Query) {

const data = await getUserInfo(customerId);

return ...