From ec693a7bb6641c796747762f786a924f5c2f27d6 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Wed, 11 Oct 2023 20:01:22 +0800
Subject: [PATCH] Fixed loading indicator container size

---
 .../LoadingFeedback/LoadingFeedback.tsx         | 17 +++++++++++++++++
 src/routes/SubjectsPage/SubjectsPage.tsx        | 13 ++++---------
 src/routes/UserInfoPage/UserInfoPage.tsx        | 13 ++++---------
 3 files changed, 25 insertions(+), 18 deletions(-)
 create mode 100644 src/components/LoadingFeedback/LoadingFeedback.tsx

diff --git a/src/components/LoadingFeedback/LoadingFeedback.tsx b/src/components/LoadingFeedback/LoadingFeedback.tsx
new file mode 100644
index 0000000..eecefad
--- /dev/null
+++ b/src/components/LoadingFeedback/LoadingFeedback.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import styles from "../../styles";
+import { View, Text, ActivityIndicator } from "react-native";
+import { colors } from "../../styles";
+import AnimatedContainer from "../AnimatedContainer/AnimatedContainer";
+
+export default function LoadingFeedback() {
+  return (
+    <View style={styles.background}>
+      <AnimatedContainer>
+        <View style={{ paddingVertical: 8 }} />
+        <ActivityIndicator size={128} color={colors.secondary_1} />
+        <Text style={styles.text_white_medium}>Loading...</Text>
+      </AnimatedContainer>
+    </View>
+  );
+}
diff --git a/src/routes/SubjectsPage/SubjectsPage.tsx b/src/routes/SubjectsPage/SubjectsPage.tsx
index e7d5905..d15515a 100644
--- a/src/routes/SubjectsPage/SubjectsPage.tsx
+++ b/src/routes/SubjectsPage/SubjectsPage.tsx
@@ -26,6 +26,9 @@ import AnimatedContainerNoScroll from "../../components/AnimatedContainer/Animat
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
 import { useToast } from "react-native-toast-notifications";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import Loading from "../Loading/Loading";
+import LoadingFeedback from "../../components/LoadingFeedback/LoadingFeedback";
 
 export default function SubjectsPage() {
   const logged_in_user = useSelector((state: RootState) => state.user.user);
@@ -184,15 +187,7 @@ export default function SubjectsPage() {
     }
   }
   if (StudentInfo.isLoading || Subjects.isLoading) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainerNoScroll>
-          <View style={{ paddingVertical: 8 }} />
-          <ActivityIndicator size={96} color={colors.secondary_1} />
-          <Text style={styles.text_white_medium}>Loading...</Text>
-        </AnimatedContainerNoScroll>
-      </View>
-    );
+    return <LoadingFeedback />;
   }
   return (
     <View style={styles.background}>
diff --git a/src/routes/UserInfoPage/UserInfoPage.tsx b/src/routes/UserInfoPage/UserInfoPage.tsx
index 129bdd4..cced0a8 100644
--- a/src/routes/UserInfoPage/UserInfoPage.tsx
+++ b/src/routes/UserInfoPage/UserInfoPage.tsx
@@ -43,6 +43,9 @@ import { setUser as setUserinState } from "../../features/redux/slices/UserSlice
 import * as ImagePicker from "expo-image-picker";
 import * as FileSystem from "expo-file-system";
 import { useToast } from "react-native-toast-notifications";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import Loading from "../Loading/Loading";
+import LoadingFeedback from "../../components/LoadingFeedback/LoadingFeedback";
 
 export default function UserInfoPage() {
   const logged_in_user = useSelector((state: RootState) => state.user.user);
@@ -292,15 +295,7 @@ export default function UserInfoPage() {
     yearlevel_query.isLoading ||
     course_query.isLoading
   ) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainerNoScroll>
-          <View style={{ paddingVertical: 8 }} />
-          <ActivityIndicator size={96} color={colors.secondary_1} />
-          <Text style={styles.text_white_medium}>Loading...</Text>
-        </AnimatedContainerNoScroll>
-      </View>
-    );
+    return <LoadingFeedback />;
   }
   return (
     <View style={styles.background}>