Remove the 'loading' placeholder from images as it degraded feed perf (…

…#202) * Remove the 'loading' placeholder from images as it degraded feed perf * Remove references
bluesky-social · Feb 14, 2023 · d6f34d8 · d6f34d8
1 parent e22e5e0
commit d6f34d8
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 51 deletions.
diff --git a/public/img/loading.png b/public/img/loading.png
diff --git a/src/view/com/util/images/Image.tsx b/src/view/com/util/images/Image.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
 import FastImage, {OnLoadEvent} from 'react-native-fast-image'
 import {DELAY_PRESS_IN} from './constants'
-import {LOADING} from '../../../lib/assets'
 import {clamp} from '../../../../lib/numbers'
 
 const MIN_ASPECT_RATIO = 0.33 // 1/3
@@ -43,7 +42,6 @@ export function Image({
       <FastImage
         style={[styles.image, {aspectRatio}]}
         source={{uri}}
-        defaultSource={LOADING}
         onLoad={onLoad}
       />
       {children}

diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -8,7 +8,6 @@ import {
   ViewStyle,
 } from 'react-native'
 import FastImage, {ImageStyle as FastImageStyle} from 'react-native-fast-image'
-import {LOADING} from '../../../lib/assets'
 import {DELAY_PRESS_IN} from './constants'
 
 interface Dim {
@@ -100,23 +99,15 @@ function ImageLayoutGridInner({
           onPress={() => onPress?.(0)}
           onPressIn={() => onPressIn?.(0)}
           onLongPress={() => onLongPress(0)}>
-          <FastImage
-            source={{uri: uris[0]}}
-            style={size1}
-            defaultSource={LOADING}
-          />
+          <FastImage source={{uri: uris[0]}} style={size1} />
         </TouchableOpacity>
         <View style={styles.wSpace} />
         <TouchableOpacity
           delayPressIn={DELAY_PRESS_IN}
           onPress={() => onPress?.(1)}
           onPressIn={() => onPressIn?.(1)}
           onLongPress={() => onLongPress(1)}>
-          <FastImage
-            source={{uri: uris[1]}}
-            style={size1}
-            defaultSource={LOADING}
-          />
+          <FastImage source={{uri: uris[1]}} style={size1} />
         </TouchableOpacity>
       </View>
     )
@@ -129,11 +120,7 @@ function ImageLayoutGridInner({
           onPress={() => onPress?.(0)}
           onPressIn={() => onPressIn?.(0)}
           onLongPress={() => onLongPress(0)}>
-          <FastImage
-            source={{uri: uris[0]}}
-            style={size2}
-            defaultSource={LOADING}
-          />
+          <FastImage source={{uri: uris[0]}} style={size2} />
         </TouchableOpacity>
         <View style={styles.wSpace} />
         <View>
@@ -142,23 +129,15 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(1)}
             onPressIn={() => onPressIn?.(1)}
             onLongPress={() => onLongPress(1)}>
-            <FastImage
-              source={{uri: uris[1]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
+            <FastImage source={{uri: uris[1]}} style={size1} />
           </TouchableOpacity>
           <View style={styles.hSpace} />
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(2)}
             onPressIn={() => onPressIn?.(2)}
             onLongPress={() => onLongPress(2)}>
-            <FastImage
-              source={{uri: uris[2]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
+            <FastImage source={{uri: uris[2]}} style={size1} />
           </TouchableOpacity>
         </View>
       </View>
@@ -173,23 +152,15 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(0)}
             onPressIn={() => onPressIn?.(0)}
             onLongPress={() => onLongPress(0)}>
-            <FastImage
-              source={{uri: uris[0]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
+            <FastImage source={{uri: uris[0]}} style={size1} />
           </TouchableOpacity>
           <View style={styles.hSpace} />
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(2)}
             onPressIn={() => onPressIn?.(2)}
             onLongPress={() => onLongPress(2)}>
-            <FastImage
-              source={{uri: uris[2]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
+            <FastImage source={{uri: uris[2]}} style={size1} />
           </TouchableOpacity>
         </View>
         <View style={styles.wSpace} />
@@ -199,23 +170,15 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(1)}
             onPressIn={() => onPressIn?.(1)}
             onLongPress={() => onLongPress(1)}>
-            <FastImage
-              source={{uri: uris[1]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
+            <FastImage source={{uri: uris[1]}} style={size1} />
           </TouchableOpacity>
           <View style={styles.hSpace} />
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(3)}
             onPressIn={() => onPressIn?.(3)}
             onLongPress={() => onLongPress(3)}>
-            <FastImage
-              source={{uri: uris[3]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
+            <FastImage source={{uri: uris[3]}} style={size1} />
           </TouchableOpacity>
         </View>
       </View>

diff --git a/src/view/lib/assets.native.ts b/src/view/lib/assets.native.ts
@@ -3,4 +3,3 @@ import {ImageRequireSource} from 'react-native'
 export const DEF_AVATAR: ImageRequireSource = require('../../../public/img/default-avatar.jpg')
 export const TABS_EXPLAINER: ImageRequireSource = require('../../../public/img/tabs-explainer.jpg')
 export const CLOUD_SPLASH: ImageRequireSource = require('../../../public/img/cloud-splash.png')
-export const LOADING: ImageRequireSource = require('../../../public/img/loading.png')
diff --git a/src/view/lib/assets.ts b/src/view/lib/assets.ts
@@ -8,5 +8,3 @@ export const TABS_EXPLAINER: ImageRequireSource = {
 }
 // @ts-ignore we need to pretend -prf
 export const CLOUD_SPLASH: ImageRequireSource = {uri: '/img/cloud-splash.png'}
-// @ts-ignore we need to pretend -prf
-export const LOADING: ImageRequireSource = {uri: '/img/loading.png'}