[ReactJS] Loading skeleton trong ReactJS

Bài đăng này đã không được cập nhật trong 4 năm

Loading skeleton là một hiệu ứng làm đẹp khi đang load dữ liệu giúp cho trang web trở nên sinh động và mượt mà hơn, các trang web hay ứng dụng nổi tiếng cũng đang dùng phương pháp loading này để làm đẹp trang web hay ứng dụng của mình, các bạn cùng xem những hình ảnh bên dưới nhé.

Dùng thư viện hỗ trợ react-loading-skeleton

Cách sử dụng

Chúng ta sử dụng thư viện react-loading-skeleton. Cài đặt bằng npm hoặc yarn:

npm install react-loading-skeleton

hoặc

yarn add react-loading-skeleton

Import để sử dụng:

import Skeleton from 'react-loading-skeleton';
 
<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton

Nguyên tắc

<Skeleton>được thiết kế để được sử dụng trực tiếp trong các component của bạn thay cho nội dung trong khi nó vẫn đang tải. Không giống như các thư viện khác, không phải tỉ mỉ crafting từng skeleton màn hình để phù hợp với font-size, line-height hay margin của nội dung của mà <Skeleton> component sẽ tự động điều chỉnh chính xác các kích thước của nội dung.

Ví dụ:

class Blogpost extends Component {
  render() {
    return (
      <div style={{ fontSize: 20, lineHeight: 2 }}>
        <h1>{this.props.title || <Skeleton />}</h1>
        {this.props.body || <Skeleton count={10} />}
      </div>
    );
  }
}

... sẽ tạo ra các Skeleton có kích thước chính xác ứng với các phần header và body mà không cần thêm bất kỳ style nào của component.

Điều này đảm bảo trạng thái tải vẫn được cập nhật với bất kỳ thay đổi nào đối với bố cục hoặc kiểu chữ của bạn.

Theming

Sử dụng <SkeletonTheme> component, bạn có thể dễ dàng thay đổi màu sắc của tất cả các skeleton components bên dưới nó trong hệ thống phân cấp của React:

import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 
<SkeletonTheme color="#202020" highlightColor="#444">
  <p>
    <Skeleton count={3} />
  </p>
</SkeletonTheme>;