mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-27 08:41:52 +00:00
Code Issues Actions 1 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 { randomNumberBetween } from '../../../utils/common';
import { LinePlaceholder } from './LinePlaceholder';
import { CompactLayout } from '../layout';
export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
({ variant, ...props }, ref) => (
<CompactLayout
{...props}
ref={ref}
before={
<>
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
/>
</>
}
>
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }}
/>
</CompactLayout>
)
({ 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>
);
}
);

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 { randomNumberBetween } from '../../../utils/common';
import { LinePlaceholder } from './LinePlaceholder';
@ -7,36 +7,33 @@ import { ModernLayout } from '../layout';
const contentMargin: CSSProperties = { marginTop: toRem(3) };
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
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
({ 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"
/>
<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 grow="Yes" gap="200" wrap="Wrap">
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
/>
<LinePlaceholder
variant={variant}
style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
/>
</Box>
</Box>
</ModernLayout>
)
</ModernLayout>
);
}
);

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

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