remove message base from message placeholders and add variant

This commit is contained in:
Ajay Bura 2024-12-13 16:04:52 +05:30
parent 01aafb76f3
commit 2026eda7ba
5 changed files with 135 additions and 50 deletions

View file

@ -1,22 +1,28 @@
import React from 'react';
import { as, toRem } from 'folds';
import { as, ContainerColor, toRem } from 'folds';
import { randomNumberBetween } from '../../../utils/common';
import { LinePlaceholder } from './LinePlaceholder';
import { CompactLayout, MessageBase } from '../layout';
import { CompactLayout } from '../layout';
export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
<MessageBase>
export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
({ variant, ...props }, ref) => (
<CompactLayout
{...props}
ref={ref}
before={
<>
<LinePlaceholder style={{ maxWidth: toRem(50) }} />
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
/>
</>
}
>
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }}
/>
</CompactLayout>
</MessageBase>
));
)
);

View file

@ -1,25 +1,42 @@
import React, { CSSProperties } from 'react';
import { Avatar, Box, as, color, toRem } from 'folds';
import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
import { randomNumberBetween } from '../../../utils/common';
import { LinePlaceholder } from './LinePlaceholder';
import { MessageBase, ModernLayout } from '../layout';
import { ModernLayout } from '../layout';
const contentMargin: CSSProperties = { marginTop: toRem(3) };
const avatarBg: CSSProperties = { backgroundColor: color.SurfaceVariant.Container };
export const DefaultPlaceholder = as<'div'>(({ ...props }, ref) => (
<MessageBase>
<ModernLayout {...props} ref={ref} before={<Avatar style={avatarBg} size="300" />}>
export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
({ variant, ...props }, ref) => (
<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 style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
<LinePlaceholder style={{ maxWidth: toRem(50) }} />
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
/>
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
</Box>
<Box grow="Yes" gap="200" wrap="Wrap">
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
/>
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
/>
</Box>
</Box>
</ModernLayout>
</MessageBase>
));
)
);

View file

@ -1,12 +1,35 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';
import { ComplexStyleRule } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
import { ContainerColor, DefaultReset, color, config, toRem } from 'folds';
export const LinePlaceholder = style([
DefaultReset,
{
width: '100%',
height: toRem(16),
borderRadius: config.radii.R300,
backgroundColor: color.SurfaceVariant.Container,
const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
backgroundColor: color[variant].Container,
});
export const LinePlaceholder = recipe({
base: [
DefaultReset,
{
width: '100%',
height: toRem(16),
borderRadius: config.radii.R300,
},
],
variants: {
variant: {
Background: getVariant('Background'),
Surface: getVariant('Surface'),
SurfaceVariant: getVariant('SurfaceVariant'),
Primary: getVariant('Primary'),
Secondary: getVariant('Secondary'),
Success: getVariant('Success'),
Warning: getVariant('Warning'),
Critical: getVariant('Critical'),
},
},
]);
defaultVariants: {
variant: 'SurfaceVariant',
},
});
export type LinePlaceholderVariants = RecipeVariants<typeof LinePlaceholder>;

View file

@ -3,6 +3,13 @@ import { Box, as } from 'folds';
import classNames from 'classnames';
import * as css from './LinePlaceholder.css';
export const LinePlaceholder = as<'div'>(({ className, ...props }, ref) => (
<Box className={classNames(css.LinePlaceholder, className)} shrink="No" {...props} ref={ref} />
));
export const LinePlaceholder = as<'div', css.LinePlaceholderVariants>(
({ className, variant, ...props }, ref) => (
<Box
className={classNames(css.LinePlaceholder({ variant }), className)}
shrink="No"
{...props}
ref={ref}
/>
)
);

View file

@ -1554,17 +1554,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
{(canPaginateBack || !rangeAtStart) &&
(messageLayout === 1 ? (
<>
<CompactPlaceholder />
<CompactPlaceholder />
<CompactPlaceholder />
<CompactPlaceholder />
<CompactPlaceholder ref={observeBackAnchor} />
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase ref={observeBackAnchor}>
<CompactPlaceholder />
</MessageBase>
</>
) : (
<>
<DefaultPlaceholder />
<DefaultPlaceholder />
<DefaultPlaceholder ref={observeBackAnchor} />
<MessageBase>
<DefaultPlaceholder />
</MessageBase>
<MessageBase>
<DefaultPlaceholder />
</MessageBase>
<MessageBase ref={observeBackAnchor}>
<DefaultPlaceholder />
</MessageBase>
</>
))}
@ -1573,17 +1589,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
{(!liveTimelineLinked || !rangeAtEnd) &&
(messageLayout === 1 ? (
<>
<CompactPlaceholder ref={observeFrontAnchor} />
<CompactPlaceholder />
<CompactPlaceholder />
<CompactPlaceholder />
<CompactPlaceholder />
<MessageBase ref={observeFrontAnchor}>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
<MessageBase>
<CompactPlaceholder />
</MessageBase>
</>
) : (
<>
<DefaultPlaceholder ref={observeFrontAnchor} />
<DefaultPlaceholder />
<DefaultPlaceholder />
<MessageBase ref={observeFrontAnchor}>
<DefaultPlaceholder />
</MessageBase>
<MessageBase>
<DefaultPlaceholder />
</MessageBase>
<MessageBase>
<DefaultPlaceholder />
</MessageBase>
</>
))}
<span ref={atBottomAnchorRef} />