acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Remove the 'loading' placeholder from images as it degraded feed perf (#202)

Browse Source 
* Remove the 'loading' placeholder from images as it degraded feed perf

* Remove references
This commit is contained in:
Paul Frazee
2023-02-14 17:30:46 -06:00
committed by GitHub
parent e22e5e0fdd
commit d6f34d8b86
5 changed files with 9 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/img/loading.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

src/view/com/util/images/Image.tsx
-2
View File
@@ -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
+9 -46
View File
@@ -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
source={{uri: uris[0]}}
style={size1}
defaultSource={LOADING}
/>
<FastImage source={{uri: uris[0]}} style={size1} />
</TouchableOpacity>
<View style={styles.wSpace} />
<TouchableOpacity
@@ -112,11 +107,7 @@ 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>
)
@@ -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,11 +129,7 @@ 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
@@ -154,11 +137,7 @@ function ImageLayoutGridInner({
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,11 +152,7 @@ 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
@@ -185,11 +160,7 @@ function ImageLayoutGridInner({
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,11 +170,7 @@ 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
@@ -211,11 +178,7 @@ function ImageLayoutGridInner({
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>
src/view/lib/assets.native.ts
-1
View File
@@ -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
-2
View File
@@ -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'}