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

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}

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,11 +99,7 @@ function ImageLayoutGridInner({
           onPress={() => onPress?.(0)}
           onPressIn={() => onPressIn?.(0)}
           onLongPress={() => onLongPress(0)}>
-          <FastImage
+          <FastImage source={{uri: uris[0]}} style={size1} />
-            source={{uri: uris[0]}}
-            style={size1}
-            defaultSource={LOADING}
-          />
         </TouchableOpacity>
         <View style={styles.wSpace} />
         <TouchableOpacity
@@ -112,11 +107,7 @@ function ImageLayoutGridInner({
           onPress={() => onPress?.(1)}
           onPressIn={() => onPressIn?.(1)}
           onLongPress={() => onLongPress(1)}>
-          <FastImage
+          <FastImage source={{uri: uris[1]}} style={size1} />
-            source={{uri: uris[1]}}
-            style={size1}
-            defaultSource={LOADING}
-          />
         </TouchableOpacity>
       </View>
     )
@@ -129,11 +120,7 @@ function ImageLayoutGridInner({
           onPress={() => onPress?.(0)}
           onPressIn={() => onPressIn?.(0)}
           onLongPress={() => onLongPress(0)}>
-          <FastImage
+          <FastImage source={{uri: uris[0]}} style={size2} />
-            source={{uri: uris[0]}}
-            style={size2}
-            defaultSource={LOADING}
-          />
         </TouchableOpacity>
         <View style={styles.wSpace} />
         <View>
@@ -142,11 +129,7 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(1)}
             onPressIn={() => onPressIn?.(1)}
             onLongPress={() => onLongPress(1)}>
-            <FastImage
+            <FastImage source={{uri: uris[1]}} style={size1} />
-              source={{uri: uris[1]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
           </TouchableOpacity>
           <View style={styles.hSpace} />
           <TouchableOpacity
@@ -154,11 +137,7 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(2)}
             onPressIn={() => onPressIn?.(2)}
             onLongPress={() => onLongPress(2)}>
-            <FastImage
+            <FastImage source={{uri: uris[2]}} style={size1} />
-              source={{uri: uris[2]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
           </TouchableOpacity>
         </View>
       </View>
@@ -173,11 +152,7 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(0)}
             onPressIn={() => onPressIn?.(0)}
             onLongPress={() => onLongPress(0)}>
-            <FastImage
+            <FastImage source={{uri: uris[0]}} style={size1} />
-              source={{uri: uris[0]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
           </TouchableOpacity>
           <View style={styles.hSpace} />
           <TouchableOpacity
@@ -185,11 +160,7 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(2)}
             onPressIn={() => onPressIn?.(2)}
             onLongPress={() => onLongPress(2)}>
-            <FastImage
+            <FastImage source={{uri: uris[2]}} style={size1} />
-              source={{uri: uris[2]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
           </TouchableOpacity>
         </View>
         <View style={styles.wSpace} />
@@ -199,11 +170,7 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(1)}
             onPressIn={() => onPressIn?.(1)}
             onLongPress={() => onLongPress(1)}>
-            <FastImage
+            <FastImage source={{uri: uris[1]}} style={size1} />
-              source={{uri: uris[1]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
           </TouchableOpacity>
           <View style={styles.hSpace} />
           <TouchableOpacity
@@ -211,11 +178,7 @@ function ImageLayoutGridInner({
             onPress={() => onPress?.(3)}
             onPressIn={() => onPressIn?.(3)}
             onLongPress={() => onLongPress(3)}>
-            <FastImage
+            <FastImage source={{uri: uris[3]}} style={size1} />
-              source={{uri: uris[3]}}
-              style={size1}
-              defaultSource={LOADING}
-            />
           </TouchableOpacity>
         </View>
       </View>

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')

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'}