1 files changed, 40 insertions, 24 deletions

diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
index 5d5b4234..2b6268a6 100644
--- a/src/components/profile/Cover.tsx
+++ b/src/components/profile/Cover.tsx
@@ -14,6 +14,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
 import {normalize, patchProfile, validateImageLink} from '../../utils';
+import {useIsFocused} from '@react-navigation/native';
 
 interface CoverProps {
   userXId: string | undefined;
@@ -26,14 +27,22 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
   );
 
   const [needsUpdate, setNeedsUpdate] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [validImage, setValidImage] = useState<boolean>(true);
+  const isFocused = useIsFocused();
 
   useEffect(() => {
-    checkAvatar(cover);
+    checkCover(cover);
+    setLoading(false);
   }, []);
 
   useEffect(() => {
+    checkCover(cover);
+  }, [cover, isFocused]);
+
+  useEffect(() => {
+    checkCover(cover);
     if (needsUpdate) {
       const userId = user.userId;
       const username = user.username;
@@ -47,26 +56,35 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
     const result = await patchProfile('header', user.userId);
     setLoading(true);
     if (result) {
+      setUpdating(true);
       setNeedsUpdate(true);
+      setLoading(false);
     } else {
       setLoading(false);
     }
   };
 
-  const checkAvatar = async (url: string | undefined) => {
+  const checkCover = async (url: string | undefined) => {
     const valid = await validateImageLink(url);
     if (valid !== validImage) {
       setValidImage(valid);
     }
+    setLoading(false);
   };
 
-  if (!validImage && userXId === undefined && !loading) {
-    return (
-      <View style={[styles.container]}>
-        <ImageBackground
-          style={styles.image}
-          defaultSource={require('../../assets/images/cover-placeholder.png')}
-          source={{uri: cover, cache: 'reload'}}>
+  return (
+    <View style={styles.container}>
+      <ImageBackground
+        style={styles.image}
+        defaultSource={require('../../assets/images/cover-placeholder.png')}
+        source={{uri: cover, cache: 'reload'}}>
+        {loading && (
+          <Image
+            source={require('../../assets/gifs/loading-animation.gif')}
+            style={styles.loadingLarge}
+          />
+        )}
+        {!validImage && userXId === undefined && !loading && !updating && (
           <TouchableOpacity
             accessible={true}
             accessibilityLabel="ADD HEADER PICTURE"
@@ -74,20 +92,10 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
             <GreyPurplePlus style={styles.plus} />
             <Text style={styles.text}>Add Picture</Text>
           </TouchableOpacity>
-        </ImageBackground>
-      </View>
-    );
-  } else {
-    return (
-      <View style={styles.container}>
-        <Image
-          style={styles.image}
-          defaultSource={require('../../assets/images/cover-placeholder.png')}
-          source={{uri: cover, cache: 'reload'}}
-        />
-      </View>
-    );
-  }
+        )}
+      </ImageBackground>
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
@@ -113,5 +121,13 @@ const styles = StyleSheet.create({
   touch: {
     flex: 1,
   },
+  loadingLarge: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    height: COVER_HEIGHT * 0.2,
+    width: IMAGE_WIDTH * 0.2,
+    aspectRatio: 1,
+    top: 100,
+  },
 });
 export default Cover;