Smart Skeleton

Trong hành trình tìm kiếm xây dựng code base tinh gọn nhưng hiệu quả…, mình đã đi qua rất nhiều cách nhưng một trong những thứ khiến mình thích thú là việc tái sử dụng layout từ component gốc thay vì tạo Skeleton riêng biệt.

Mình rất thích việc thêm Skeleton vào app, nhưng việc build 1 component Skeleton chung layout cho mỗi component rất mất thời gian, cũng như công sức để update Skeleton khi có thay đổi từ component gốc.

Qua 1 thời gian, dưới đây là hướng tiếp cận được mình sử dụng nhiều khi cần tới Skeleton, không cần code từng component Skeleton mà thay vào đó sử dụng trực tiếp component gốc:

Sử dụng fallbackData/initialData của React Query hoặc SWR
Tạo fake data cho Skeleton trong lúc chờ dữ liệu thực sự được load. Trong trường hợp này mình sử dụng 10 items.
Thêm các class để chuyển đổi thành Skeleton khi loading
Khi trạng thái isLoading là true, apply các class sau lên các element hoặc interactive elements:
- text-transparent: Ẩn nội dung text.
- bg-gray-400 + animate-pulse: Thêm background xám để tạo hiệu ứng Skeleton. Bạn có thể implement 1 animation mới cho Skeleton nếu muốn (ví dụ shimmer)
- opacity-40: Làm mờ element.
- [&>*]:invisible: Ẩn các children của element.
- SkeletonWrapper: Một wrapper để ẩn các element khi loading, đi cùng inert attribute để ngăn người dùng tương tác với các element khi loading.

Fork

import { useState } from "react"
import useSwr from "swr"

const skeletonItemClass =
	"animate-pulse !text-transparent opacity-40 bg-gray-400 rounded-[10px] [&>*]:invisible"
const skeletonStyle = {
	// "-webkit-box-decoration-break": "clone",
	// "box-decoration-break": "clone",
}

function SkeletonWrapper({ children, isLoading, className }) {
	return isLoading ? (
		<div inert className={`${skeletonItemClass} ${className}`} style={skeletonStyle}>
			{children}
		</div>
	) : (
		children
	)
}

export default function App() {
	const loadPosts = async () => {
		// fake loading
		await new Promise((resolve) => setTimeout(resolve, 2000))
		return fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
			res.json(),
		)
	}
	const [loadId, setLoadId] = useState(0)
	const posts = useSwr(`/posts/${loadId}`, loadPosts, {
		fallbackData: Array.from({ length: 10 }, () => ({
			id: -1,
			title: "Lorem ipsum dolor sit amet",
			body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
		})),
	})

	const isLoading = posts.isLoading

	return (
		<div className="flex flex-col gap-4 p-4">
			<h1>Posts</h1>
			<button
				type="button"
				onClick={() => {
					setLoadId(id => id +1)
				}}
				className="bg-blue-500 text-white px-4 py-2 rounded-md"
			>
				Refresh
			</button>
			<div className="flex flex-col gap-4">
				{posts.data.map((post, index) => (
					<div
						className={`bg-gray-100 rounded-md p-4 flex gap-2 ${isLoading ? "user-select-none pointer-events-none" : ""}`}
						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
						key={index}
					>
						<SkeletonWrapper isLoading={isLoading} className={"w-[30px] h-[30px]"}>
							<img
								src="https://via.placeholder.com/150"
								alt="placeholder"
								className={"w-[30px] h-[30px] min-w-[30px] min-h-[30px] object-cover"}
							/>
						</SkeletonWrapper>
						<div className="space-y-2">
							<span
								className={`text-2xl font-bold ${isLoading ? skeletonItemClass : ""}`}
								style={isLoading ? skeletonStyle : {}}
							>
								Lorem ipsum dolor sit amet
							</span>
							<p
								className={`text-sm text-gray-500 ${isLoading ? skeletonItemClass : ""}`}
								style={isLoading ? skeletonStyle : {}}
							>
								{post.body}
							</p>
						</div>
						<div className="flex-1">
							<button
								type="button"
								className={`bg-blue-500 text-white p-1 rounded-md ${isLoading ? skeletonItemClass : ""}`}
								style={isLoading ? skeletonStyle : {}}
							>
								...
							</button>
						</div>
					</div>
				))}
			</div>
		</div>
	)
}

const tailwind = document.createElement("script")
tailwind.src = "https://cdn.tailwindcss.com/3.4.16"
tailwind.type = "text/javascript"
document.head.appendChild(tailwind)

Nhưng cách này không thực sự hoàn hảo, trong một số trường hợp ví dụ như dưới đây, khi đoạn text xuống dòng, background của nó sẽ bị hỏng

Fork

import { useState } from "react"
import useSwr from "swr"

const skeletonItemClass =
	"animate-pulse !text-transparent opacity-40 bg-gray-400 rounded-[10px]"

export default function App() {
	const [isLoading, setIsLoading] = useState(true)
	const [skeletonStyle, setSkeletonStyle] = useState({})

	return (
		<div className="flex flex-col gap-4 p-4">
			<button
				type="button"
				className={`${isLoading ? "bg-blue-500 text-white" : "bg-blue-300 text-white"} px-4 py-2 rounded-md`}
				onClick={() => {
					setIsLoading(!isLoading)
				}}
			>
				Toggle isLoading
			</button>
			<button
				type="button"
				className={`${skeletonStyle["-webkit-box-decoration-break"] ? "bg-blue-500 text-white" : "bg-blue-300 text-white"} px-4 py-2 rounded-md`}
				onClick={() => {
					if (!skeletonStyle["-webkit-box-decoration-break"]) {
						setSkeletonStyle({
							"-webkit-box-decoration-break": "clone",
							"box-decoration-break": "clone",
						})
					} else {
						setSkeletonStyle({})
					}
				}}
			>
				With box-decoration-break: clone
			</button>
			<div className="flex flex-col gap-4">
				<div
					className={`bg-gray-100 rounded-md p-4 flex gap-2 ${isLoading ? "user-select-none pointer-events-none" : ""}`}
				>
					<div className="space-y-2">
						<p
							className={`text-2xl font-bold ${isLoading ? skeletonItemClass : ""}`}
							style={isLoading ? skeletonStyle : {}}
						>
							Lorem ipsum dolor sit amet
						</p>
						<span
							className={`text-sm text-gray-500 ${isLoading ? skeletonItemClass : ""}`}
							style={isLoading ? skeletonStyle : {}}
						>
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
							quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.
							Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
							elit. Quisquam, quos.
						</span>
					</div>
					<div className="flex-1">
						<button
							type="button"
							className={`bg-blue-500 text-white p-1 rounded-md ${isLoading ? skeletonItemClass : ""}`}
							style={isLoading ? skeletonStyle : {}}
						>
							...
						</button>
					</div>
				</div>
			</div>
		</div>
	)
}

const tailwind = document.createElement("script")
tailwind.src = "https://cdn.tailwindcss.com/3.4.16"
tailwind.type = "text/javascript"
document.head.appendChild(tailwind)

Giải pháp mình tìm được gần đây là sử dụng -webkit-box-decoration-break: clone, một CSS property mới được thêm vào từ Chrome 130, giúp tuỳ chỉnh cách hiển thị khi element xuống dòng (đọc thêm tại đây), bạn có thể với button phía trên để thấy sự khác biệt

Một số cải tiến có thể thực hiện thêm trong thực tế:

Dùng TextContext của react-aria-components để đẩy trạng thái loading xuống các Text, bỏ qua việc if else trên từng element

Tương tự với các component khác như Image, Tabs,…

Tạo 1 component Skeleton wrap lại toàn bộ content thay vì if else trên từng element, có thể cân nhắn làm thêm SkeletonContext
Smart Skeleton: sau khi nhận được response từ API, lưu totalPosts vào localStorage và sử dụng totalPosts cho render Skeleton trong lần kế tiếp load lại trang. Điều này giúp tăng trải nghiệm người dùng khi dùng số lượng Skeleton giống với thực tế (ví dụ 3) thay vì cố định 1 số như 10/20