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