import React, {memo} from 'react';
import {Skeleton} from '@components';

import {styles} from './styles';

export const MessagesSkeleton = memo(() => {
  return (
    <Skeleton style={styles.container}>
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
      <Skeleton.Item height={80} style={styles.skeletonItem} />
    </Skeleton>
  );
});
