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 lintzio/stable
parent
8f3915e0a5
commit
ae895155fd
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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 ? (
|
||||
|
|
Loading…
Reference in New Issue