bigbuffet-rw/app/soapbox/features/placeholder/components/placeholder-card.tsx

23 lines
691 B
TypeScript
Raw Normal View History

2023-02-06 10:01:03 -08:00
import clsx from 'clsx';
import React from 'react';
import { randomIntFromInterval, generateText } from '../utils';
/** Fake link preview to display while data is loading. */
const PlaceholderCard: React.FC = () => (
2023-02-06 10:01:03 -08:00
<div className={clsx('status-card', {
2022-03-21 11:09:01 -07:00
'animate-pulse': true,
})}
>
2023-02-01 14:13:42 -08:00
<div className='primary-500 w-2/5 rounded-l'>&nbsp;</div>
2023-02-01 14:13:42 -08:00
<div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
2022-03-21 11:09:01 -07:00
<p>{generateText(randomIntFromInterval(5, 25))}</p>
<p>{generateText(randomIntFromInterval(5, 75))}</p>
<p>{generateText(randomIntFromInterval(5, 15))}</p>
</div>
</div>
);
2022-03-21 11:09:01 -07:00
export default React.memo(PlaceholderCard);