tiktuk-loading v1.0.1

Skeleton loading component

This package is a part of Homework for Genesis Front-End School. It includes a set of two configurable skeleton components.

Important note

This npm package is created for homework project app (tiktuk) use only.

Installation

Open a Terminal in the project root and run:

yarn add tiktuk-skeleton-loading

Or if you use npm:

npm install tiktuk-skeleton-loading

Usage

import React from "react";
import { SkeletonFeedList } from "tiktuk-loading";

import PostsList from "../components/FeedPostsList";
import ErrorAlert from "../components/ErrorAlert";
import { useFetch } from "../api/useFetch";

const POSTS_PER_PAGE = 9;
const MEDIA_QUERY = "(max-width:800px)";
const VIDEO_HEIGHT = 350;

const Page = () => {
  const { data, isLoading, isError } = useFetch();

  if (isLoading) {
    return (
      <SkeletonFeedList
        postsPerPage={POSTS_PER_PAGE}
        mediaQuery={MEDIA_QUERY}
        videoHeight={VIDEO_HEIGHT}
      />
    );
  }

  if (isError) {
    return <ErrorAlert />;
  }

  return <PostsList allPosts={data} />;
};

export default Page;

Props