react skeleton screen with redux about react-skeleton-screen HOT 2 CLOSED

const preloadedState = {
  links: {
    items: [],
    isLoading: false,
    hasLoaded: false,
    hasErrored: false,
  },
  ...
}

import React from 'react'
import PropTypes from 'prop-types'
import { Skeleton } from 'react-skeleton-screen'
import 'react-skeleton-screen/scss/Skeleton.scss'
import Link from './Link'

const LinkList = ({ linkCategories, links }) => {

  if (links.hasErrored) {
    return <p>Sorry! There was an error loading the items</p>
  }

  if ((links.isLoading || linkCategories.isLoading) &&
      (!links.hasLoaded || !linkCategories.hasLoaded)) {
    return (
      <div>
        <Skeleton width="160px" height="30px" />
        <Skeleton width="70%" height="25px" marginLeft="30px" />
        <Skeleton width="60%" height="25px" marginLeft="30px" />
        <Skeleton width="110px" height="30px" />
        <Skeleton width="55%" height="25px" marginLeft="30px" />
        <Skeleton width="140px" height="30px" />
        <Skeleton width="55%" height="25px" marginLeft="30px" />
        <Skeleton width="65%" height="25px" marginLeft="30px" />
        <Skeleton width="90px" height="30px" />
        <Skeleton width="80%" height="25px" marginLeft="30px" />
        <Skeleton width="65%" height="25px" marginLeft="30px" />
      </div>
    )
  }

  return (
    <div>
      {
        linkCategories.hasLoaded && links.hasLoaded && linkCategories.items.map((category) =>
          links.items.some(link => link.category === category.id) &&
            <div
              className="links"
              key={category.id}
            >
              <h3>{category.name}</h3>
              <ul>
                {
                  links.items.filter(link => link.category === category.id).map(link =>
                    <li key={link.id}>
                      <Link
                        url={link.url}
                        title={link.title}
                        by={link.by}
                      />
                    </li>
                  )
                }
              </ul>
            </div>
      )}
    </div>
  )
}

LinkList.propTypes = {
  links: PropTypes.object.isRequired,
  linkCategories: PropTypes.object.isRequired
}

export default LinkList