mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-29 01:28:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix message placeholder flickering

Browse source
This commit is contained in:
Ajay Bura 2024-12-14 17:55:10 +05:30
parent 00547c17e2
commit f4d7e36579
3 changed files with 64 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/app/components/message/placeholder/CompactPlaceholder.tsx
View file

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

59
src/app/components/message/placeholder/DefaultPlaceholder.tsx
View file

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

32
src/app/features/room/RoomTimeline.tsx
View file

@ -1555,31 +1555,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
(messageLayout === 1 ? ( (messageLayout === 1 ? (
<> <>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase ref={observeBackAnchor}> <MessageBase ref={observeBackAnchor}>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
</> </>
) : ( ) : (
<> <>
<MessageBase> <MessageBase>
<DefaultPlaceholder /> <DefaultPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<DefaultPlaceholder /> <DefaultPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase ref={observeBackAnchor}> <MessageBase ref={observeBackAnchor}>
<DefaultPlaceholder /> <DefaultPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
</> </>
))} ))}
@ -1590,31 +1590,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
(messageLayout === 1 ? ( (messageLayout === 1 ? (
<> <>
<MessageBase ref={observeFrontAnchor}> <MessageBase ref={observeFrontAnchor}>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<CompactPlaceholder /> <CompactPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
</> </>
) : ( ) : (
<> <>
<MessageBase ref={observeFrontAnchor}> <MessageBase ref={observeFrontAnchor}>
<DefaultPlaceholder /> <DefaultPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<DefaultPlaceholder /> <DefaultPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
<MessageBase> <MessageBase>
<DefaultPlaceholder /> <DefaultPlaceholder key={getItems().length} />
</MessageBase> </MessageBase>
</> </>
))} ))}