Fix to error screen and postthread loading state (#540)

* Fix loading state on postthread

* Improve error screen rendering

* Dark mode exclamation in error screen

* Fix lint
zio/stable
Paul Frazee 2023-04-25 20:45:59 -05:00 committed by GitHub
parent 8f3915e0a5
commit ae895155fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 23 deletions

View File

@ -130,10 +130,16 @@ export const PostThread = observer(function PostThread({
// loading
// =
if ((view.isLoading && !view.isRefreshing) || view.params.uri !== uri) {
if (
!view.hasLoaded ||
(view.isLoading && !view.isRefreshing) ||
view.params.uri !== uri
) {
return (
<CenteredView>
<ActivityIndicator />
<View style={s.p20}>
<ActivityIndicator size="large" />
</View>
</CenteredView>
)
}

View File

@ -1,13 +1,13 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {StyleSheet, View} from 'react-native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {Text} from '../text/Text'
import {colors} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
import {Button} from '../forms/Button'
import {CenteredView} from '../Views'
export function ErrorScreen({
@ -24,18 +24,18 @@ export function ErrorScreen({
testID?: string
}) {
const theme = useTheme()
const pal = usePalette('error')
const pal = usePalette('default')
return (
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
<View style={styles.errorIconContainer}>
<View
style={[
styles.errorIcon,
{backgroundColor: theme.palette.error.icon},
{backgroundColor: theme.palette.inverted.background},
]}>
<FontAwesomeIcon
icon="exclamation"
style={{color: colors.white}}
style={pal.textInverted}
size={24}
/>
</View>
@ -43,34 +43,30 @@ export function ErrorScreen({
<Text type="title-lg" style={[styles.title, pal.text]}>
{title}
</Text>
<Text style={[styles.message, pal.textLight]}>{message}</Text>
<Text style={[styles.message, pal.text]}>{message}</Text>
{details && (
<Text
testID={`${testID}-details`}
type="sm"
style={[
styles.details,
pal.textInverted,
{backgroundColor: theme.palette.default.background},
]}>
style={[styles.details, pal.text, pal.viewLight]}>
{details}
</Text>
)}
{onPressTryAgain && (
<View style={styles.btnContainer}>
<TouchableOpacity
<Button
testID="errorScreenTryAgainButton"
style={[styles.btn, {backgroundColor: theme.palette.error.icon}]}
type="default"
style={[styles.btn]}
onPress={onPressTryAgain}>
<FontAwesomeIcon
icon="arrows-rotate"
style={pal.text as FontAwesomeIconStyle}
style={pal.link as FontAwesomeIconStyle}
size={16}
/>
<Text type="button" style={[styles.btnText, pal.text]}>
<Text type="button" style={[styles.btnText, pal.link]}>
Try again
</Text>
</TouchableOpacity>
</Button>
</View>
)}
</CenteredView>
@ -115,11 +111,10 @@ const styles = StyleSheet.create({
marginBottom: 10,
},
errorIcon: {
borderRadius: 30,
borderRadius: 25,
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
marginRight: 5,
},
})

View File

@ -145,8 +145,7 @@ export const ProfileScreen = withAuthRequired(
<ErrorScreen
testID="profileErrorScreen"
title="Failed to load profile"
message={`There was an issue when attempting to load ${route.params.name}`}
details={uiState.profile.error}
message={uiState.profile.error}
onPressTryAgain={onPressTryAgain}
/>
) : uiState.profile.hasLoaded ? (