zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Tweak the loading placeholders to use the full space and position better (#2072)

zio/stable
Paul Frazee 2023-12-04 11:59:27 -08:00 committed by GitHub
parent a01497fed4
commit e47c3dbe0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/view/com/util/LoadingPlaceholder.tsx
View File

@ -7,7 +7,7 @@ import {
DimensionValue,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {HeartIcon} from 'lib/icons'
import {HeartIcon, HeartIconSolid} from 'lib/icons'
import {s} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
@ -46,12 +46,22 @@ export function PostLoadingPlaceholder({
const pal = usePalette('default')
return (
<View style={[styles.post, pal.view, style]}>
<LoadingPlaceholder width={52} height={52} style={styles.avatar} />
<LoadingPlaceholder
width={52}
height={52}
style={[
styles.avatar,
{
position: 'relative',
top: -6,
},
]}
/>
<View style={[s.flex1]}>
<LoadingPlaceholder width={100} height={8} style={[s.mb10]} />
<LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
<LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
<LoadingPlaceholder width={120} height={8} style={[s.mb10]} />
<LoadingPlaceholder width={100} height={6} style={{marginBottom: 10}} />
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
<LoadingPlaceholder width="80%" height={6} style={{marginBottom: 15}} />
<View style={s.flexRow}>
<View style={s.flex1}>
<FontAwesomeIcon
@ -90,6 +100,8 @@ export function PostFeedLoadingPlaceholder() {
<PostLoadingPlaceholder />
<PostLoadingPlaceholder />
<PostLoadingPlaceholder />
<PostLoadingPlaceholder />
<PostLoadingPlaceholder />
</View>
)
}
@ -102,11 +114,23 @@ export function NotificationLoadingPlaceholder({
const pal = usePalette('default')
return (
<View style={[styles.notification, pal.view, style]}>
<View style={[s.flexRow, s.mb10]}>
<LoadingPlaceholder width={30} height={30} style={styles.smallAvatar} />
<View style={{paddingLeft: 30, paddingRight: 10}}>
<HeartIconSolid
style={{color: pal.colors.backgroundLight} as ViewStyle}
size={30}
/>
</View>
<View style={{flex: 1}}>
<View style={[s.flexRow, s.mb10]}>
<LoadingPlaceholder
width={30}
height={30}
style={styles.smallAvatar}
/>
</View>
<LoadingPlaceholder width="90%" height={6} style={[s.mb5]} />
<LoadingPlaceholder width="70%" height={6} style={[s.mb5]} />
</View>
<LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
<LoadingPlaceholder width={120} height={8} style={[s.mb5]} />
</View>
)
}
@ -239,18 +263,19 @@ const styles = StyleSheet.create({
},
post: {
flexDirection: 'row',
padding: 10,
margin: 1,
alignItems: 'flex-start',
paddingHorizontal: 10,
paddingTop: 20,
paddingBottom: 5,
},
avatar: {
borderRadius: 26,
marginRight: 10,
marginLeft: 6,
marginLeft: 8,
},
notification: {
flexDirection: 'row',
padding: 10,
paddingLeft: 46,
margin: 1,
},
profileCard: {
flexDirection: 'row',