mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-03-13 06:30:01 +01:00
35f0e400ad
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled
* add pinned room events hook * room pinned message - WIP * add room event hook * fetch pinned messages before displaying * use react-query in room event hook * disable staleTime and gc to 1 hour in room event hook * use room event hook in reply component * render pinned messages * add option to pin/unpin messages * remove message base from message placeholders and add variant * display message placeholder while loading pinned messages * render pinned event error * show no pinned message placeholder * fix message placeholder flickering
27 lines
924 B
TypeScript
27 lines
924 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>
|
|
);
|
|
}
|
|
);
|