Chia code bằng `React.lazy` + `Suspense`, mỗi lần chuyển tab fallback nhấp nháy một cái rồi biến mất. Vì sao và xử lý thế nào?

Nhấp nháy vì chunk tải rất nhanh (vài chục ms): React kịp hiện fallback rồi thay ngay bằng nội dung thật, mắt người đọc thành một cú giật.

Các cách xử lý, theo thứ tự nên thử:

1. Đánh dấu chuyển tab là transition. Trong transition, React giữ nguyên UI cũ trong lúc chờ thay vì rơi vào fallback — đây là cách đúng nhất cho điều hướng.

const [isPending, startTransition] = useTransition()

function openTab(next) {
  startTransition(() => setTab(next))
}
// keep the old tab visible, dim it while isPending

2. Preload chunk trước khi cần: gọi hàm import khi người dùng hover/focus vào nút tab, để lúc bấm thì chunk đã nằm trong cache.

3. Đừng cắt lazy quá nhỏ. Một tab vài KB không đáng phải trả giá bằng một vòng loading; chỉ lazy những màn hình thật sự nặng (editor, chart, map).

Skeleton "chờ tối thiểu 300ms" là giải pháp cuối, vì nó làm màn hình chậm đi có chủ đích.