LoadingOverlay & useSpinDelay

Hiện loader đúng lúc: không nháy với phản hồi nhanh, không chập chờn với phản hồi chậm — và chỉ phủ đúng vùng đang tải.

useSpinDelay(loading, { delay, minDuration }) chỉ bật loader khi việc chờ kéo dài quá delay (mặc định 300ms) và một khi đã hiện thì giữ ít nhất minDuration (500ms). LoadingOverlay dựng trên hook này: phủ một vùng bằng bề mặt mờ + Spinner + nhãn, nội dung cũ vẫn giữ chỗ bên dưới, vùng có aria-busy và nhãn được đọc qua live region.

Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản

DH-1024 · Nguyễn Văn An1.250,00 US$
DH-1025 · Trần Thị Bình860,00 US$
DH-1026 · Lê Hoàng Cường2.040,00 US$

Cập nhật lúc 19:36:14

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { LoadingOverlay, useSpinDelay } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Hiện spinner ngaySố lần tải: 0

useSpinDelaySố lần tải: 0

Có và không có useSpinDelay

Chọn “Nhanh” rồi bấm Tải vài lần: bên trái nháy spinner 150ms, bên phải đứng yên. Chọn “Chậm”: bên phải trễ 300ms rồi giữ ổn định.

Doanh thu tháng 10

128.400 US$

Tăng 12% so với tháng trước

Giữ nội dung cũ dưới lớp phủ

Khi làm mới dữ liệu đã có, phủ mờ thay vì thay bằng khung xương — người dùng vẫn đọc được số cũ.

Gửi thông báo qua emailĐã lưu

Chỉ báo nhỏ cũng cần delay

Dòng “Đang lưu…” của thao tác tự lưu dùng chung useSpinDelay — lưu nhanh thì chỉ thấy “Đã lưu”.

Cách dùng

Nên

Bọc mọi loader (spinner, overlay, “Đang lưu…”) bằng useSpinDelay để phản hồi dưới 300ms không gây nháy.
Phủ đúng vùng đang tải và giữ nội dung cũ khi làm mới dữ liệu đã có.
Đặt aria-busy lên vùng đang tải và nói bằng chữ việc đang làm (“Đang làm mới…”).

Không nên

Không phủ cả trang cho một thao tác cục bộ.
Không tắt loader ngay khi vừa hiện được vài chục mili-giây — giữ minDuration.
Không chuyển focus vào lớp phủ; focus ở nguyên chỗ người dùng đang thao tác.

Props

Prop · Kiểu	Mặc định	Mô tả
useSpinDelay(loading, options)(boolean, SpinDelayOptions) => boolean	Mặc định: —	Trả về true khi nên hiện loader.
options.delaynumber	Mặc định: 300	Chờ (ms) trước khi hiện; xong sớm hơn thì không hiện gì.
options.minDurationnumber	Mặc định: 500	Đã hiện thì giữ tối thiểu (ms).
LoadingOverlay.loadingboolean	Mặc định: —	Vùng đang tải; aria-busy cập nhật ngay, lớp phủ theo delay.
labelReactNode	Mặc định: "Loading…"	Nhãn dưới Spinner; chuỗi được đọc qua live region khi lớp phủ hiện.
delay / minDurationnumber	Mặc định: 0 / 500 khi có delay	Truyền cho useSpinDelay.
spinnerSizeSpinnerSize	Mặc định: "medium"	Cỡ Spinner.
overlayClassNamestring	Mặc định: —	Class cho lớp phủ (độ trong, padding…).

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.loadingOverlay

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
labelstring Nhãn dưới Spinner, cũng là câu đọc cho trình đọc màn hình.	Mặc định (tiếng Anh)`"Loading…"`	messagesVi`"Đang tải…"`
announcementstring Câu đọc khi `label` không phải chuỗi.	Mặc định (tiếng Anh)`"Loading"`	messagesVi`"Đang tải"`