Card use blurhash

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<Props> = ({ card }) => {
   const { theme } = useTheme()
 
+  const [imageLoaded, setImageLoaded] = useState(false)
+  useEffect(
+    () => card.image && Image.getSize(card.image, () => setImageLoaded(true)),
+    []
+  )
+  const cardVisual = useMemo(() => {
+    if (imageLoaded) {
+      return <Image source={{ uri: card.image }} style={styles.image} />
+    } else {
+      return (
+        <Surface style={styles.image}>
+          <Blurhash hash={card.blurhash} />
+        </Surface>
+      )
+    }
+  }, [imageLoaded])
+
   return (
     <Pressable
       style={[styles.card, { borderColor: theme.border }]}
       onPress={async () => await openLink(card.url)}
     >
-      {card.image && (
+      {card.image && <View style={styles.left}>{cardVisual}</View>}
-        <View style={styles.left}>
-          <Image source={{ uri: card.image }} style={styles.image} />
-        </View>
-      )}
       <View style={styles.right}>
         <Text
           numberOfLines={2}