diff --git a/src/components/Timelines/Timeline/Shared/Card.tsx b/src/components/Timelines/Timeline/Shared/Card.tsx index 6046cf8c..2f1d3cf6 100644 --- a/src/components/Timelines/Timeline/Shared/Card.tsx +++ b/src/components/Timelines/Timeline/Shared/Card.tsx @@ -1,8 +1,10 @@ -import React from 'react' +import React, { useEffect, useMemo, useState } from 'react' import { Image, Pressable, StyleSheet, Text, View } from 'react-native' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import openLink from '@root/utils/openLink' +import { Surface } from 'gl-react-expo' +import { Blurhash } from 'gl-react-blurhash' export interface Props { card: Mastodon.Card @@ -11,16 +13,29 @@ export interface Props { const TimelineCard: React.FC = ({ card }) => { const { theme } = useTheme() + const [imageLoaded, setImageLoaded] = useState(false) + useEffect( + () => card.image && Image.getSize(card.image, () => setImageLoaded(true)), + [] + ) + const cardVisual = useMemo(() => { + if (imageLoaded) { + return + } else { + return ( + + + + ) + } + }, [imageLoaded]) + return ( await openLink(card.url)} > - {card.image && ( - - - - )} + {card.image && {cardVisual}}