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

Improve spoilered image UX with autoload off

Browse source
This commit is contained in:
Ginger 2025-02-19 10:34:57 -05:00
parent 6af25c5cfe
commit 597c05b86d
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/components/message/content/ImageContent.tsx
View file

@ -151,7 +151,7 @@ export const ImageContent = as<'div', ImageContentProps>(
punch={1} punch={1}
/> />
)} )}
{!autoPlay && srcState.status === AsyncStatus.Idle && ( {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center"> <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
<Button <Button
variant="Secondary" variant="Secondary"
@ -178,7 +178,7 @@ export const ImageContent = as<'div', ImageContentProps>(
})} })}
</Box> </Box>
)} )}
{srcState.status === AsyncStatus.Success && blurred && ( {blurred && (
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center"> <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
<TooltipProvider <TooltipProvider
tooltip={ tooltip={
@ -198,7 +198,12 @@ export const ImageContent = as<'div', ImageContentProps>(
radii="Pill" radii="Pill"
size="500" size="500"
outlined outlined
onClick={() => setBlurred(false)} onClick={() => {
setBlurred(false);
if (srcState.status === AsyncStatus.Idle) {
loadSrc();
}
}}
> >
<Text size="B300">Spoiler</Text> <Text size="B300">Spoiler</Text>
</Chip> </Chip>
@ -207,7 +212,8 @@ export const ImageContent = as<'div', ImageContentProps>(
</Box> </Box>
)} )}
{(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) && {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
!load && ( !load &&
!markedAsSpoiler && (
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center"> <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
<Spinner variant="Secondary" /> <Spinner variant="Secondary" />
</Box> </Box>