From ae895155fd2ca317afa59066633c12e8968e9e7c Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 25 Apr 2023 20:45:59 -0500
Subject: [PATCH] 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
---
 src/view/com/post-thread/PostThread.tsx | 10 ++++++--
 src/view/com/util/error/ErrorScreen.tsx | 33 +++++++++++--------------
 src/view/screens/Profile.tsx            |  3 +--
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index a1e25a6a..6e387b8d 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -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>
     )
   }
diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx
index c66ee790..dee62596 100644
--- a/src/view/com/util/error/ErrorScreen.tsx
+++ b/src/view/com/util/error/ErrorScreen.tsx
@@ -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,
   },
 })
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index cd6c72ff..4e4e3040 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -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 ? (