Lotus Bot
23008670f3
CI / Build & Quality Checks (push) Successful in 10m13s
- i18next 23->26 + react-i18next 15->17 - prettier 2->3, reformat all files - replace @fontsource/inter with @fontsource-variable/inter 5, update import path - domhandler 5->6 (aligns with transitive deps) - lint-staged 16->17
28 lines
925 B
TypeScript
28 lines
925 B
TypeScript
import React, { useMemo } from 'react';
|
|
import { as, ContainerColor, toRem } from 'folds';
|
|
import { randomNumberBetween } from '../../../utils/common';
|
|
import { LinePlaceholder } from './LinePlaceholder';
|
|
import { CompactLayout } from '../layout';
|
|
|
|
export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
|
|
({ variant, ...props }, ref) => {
|
|
const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
|
|
const msgSize = useMemo(() => randomNumberBetween(120, 500), []);
|
|
|
|
return (
|
|
<CompactLayout
|
|
{...props}
|
|
ref={ref}
|
|
before={
|
|
<>
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
|
|
</>
|
|
}
|
|
>
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
|
|
</CompactLayout>
|
|
);
|
|
},
|
|
);
|