5chan/src/components/CatalogLoader.jsx

import React from 'react';
import ContentLoader from 'react-content-loader';
import useGeneralStore from '../hooks/stores/useGeneralStore';

const SingleRectLoader = () => {
  const selectedStyle = useGeneralStore((state) => state.selectedStyle);
  const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
  const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';

  return (
    <ContentLoader
      speed={2}
      width={150}
      height={215}
      viewBox='0 0 150 215'
      backgroundColor={backgroundColor}
      foregroundColor={foregroundColor}
      style={{
        width: '150px',
        height: '215px',
        marginRight: '30px',
        marginBottom: '30px',
      }}
    >
      <rect x={0} y={0} width='150' height='150' />
      <rect x={0} y={170} width='150' height='18' />
      <rect x={0} y={195} width='80' height='20' />
    </ContentLoader>
  );
};

const CatalogLoader = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        boxSizing: 'border-box',
      }}
    >
      {[...Array(24)].map((_, index) => (
        <SingleRectLoader key={index} />
      ))}
    </div>
  );
};

export default CatalogLoader;