35f0e400ad
* 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
40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import React, { CSSProperties, useMemo } from 'react';
|
|
import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
|
|
import { randomNumberBetween } from '../../../utils/common';
|
|
import { LinePlaceholder } from './LinePlaceholder';
|
|
import { ModernLayout } from '../layout';
|
|
|
|
const contentMargin: CSSProperties = { marginTop: toRem(3) };
|
|
|
|
export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
|
|
({ variant, ...props }, ref) => {
|
|
const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
|
|
const msgSize = useMemo(() => randomNumberBetween(80, 200), []);
|
|
const msg2Size = useMemo(() => randomNumberBetween(80, 200), []);
|
|
|
|
return (
|
|
<ModernLayout
|
|
{...props}
|
|
ref={ref}
|
|
before={
|
|
<Avatar
|
|
style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
|
|
size="300"
|
|
/>
|
|
}
|
|
>
|
|
<Box style={contentMargin} grow="Yes" direction="Column" gap="200">
|
|
<Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
|
|
</Box>
|
|
<Box grow="Yes" gap="200" wrap="Wrap">
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
|
|
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(msg2Size) }} />
|
|
</Box>
|
|
</Box>
|
|
</ModernLayout>
|
|
);
|
|
}
|
|
);
|