Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

show placeholders for loading img tags, this allows the entry to have its final height immediately

Browse Source
This commit is contained in:
Athou
2022-08-20 23:02:55 +02:00
parent 1f2a265c54
commit f81491fb32
10 changed files with 155 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
commafeed-client/src/components/content/Enclosure.tsx
View File

@@ -1,19 +1,13 @@
import { createStyles } from "@mantine/core"
const useStyles = createStyles(() => ({
enclosureImage: {
maxWidth: "100%",
height: "auto",
},
}))
import { TypographyStylesProvider } from "@mantine/core"
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
export function Enclosure(props: { enclosureType?: string; enclosureUrl?: string }) {
const { classes } = useStyles()
const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0
const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0
const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0
return (
<>
<TypographyStylesProvider>
{hasVideo && (
// eslint-disable-next-line jsx-a11y/media-has-caption
<video controls>
@@ -26,7 +20,7 @@ export function Enclosure(props: { enclosureType?: string; enclosureUrl?: string
<source src={props.enclosureUrl} type={props.enclosureType} />
</audio>
)}
{hasImage && <img src={props.enclosureUrl} alt="enclosure" className={classes.enclosureImage} />}
</>
{hasImage && <ImageWithPlaceholderWhileLoading src={props.enclosureUrl} alt="enclosure" />}
</TypographyStylesProvider>
)
}