IWB-6: Added more loading spinners

app/(auth)/signin.js

@@ -33,6 +33,7 @@ export default function SignIn() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [forgotLoading, setForgotLoading] = useState(false);
+  const [loginLoading, setLoginLoading] = useState(false);
   const { setCurrentUserId } = useAuthContext();
 
   const { height } = useWindowDimensions();
@@ -62,6 +63,7 @@ export default function SignIn() {
   }, [timeIntervalPassword]);
 
   async function handleSignIn() {
+    setLoginLoading(true);
     if (process.env.EXPO_PUBLIC_TEST_UID) {
       // Only allow login as test user while using `yarn test` to reduce errors
       setCurrentUserId(process.env.EXPO_PUBLIC_TEST_UID);
@@ -74,6 +76,7 @@ export default function SignIn() {
         showDialog("Error", getErrorString(e));
       }
     }
+    setLoginLoading(false);
   }
 
   async function handleForgotPassword() {
@@ -204,6 +207,7 @@ export default function SignIn() {
               onPress={handleSignIn}
               buttonColor={themeColors.accent}
               labelStyle={styles.buttonText}
+              loading={loginLoading}
             >
               Login
             </Button>
@@ -216,7 +220,7 @@ export default function SignIn() {
                 style={styles.button}
                 labelStyle={styles.buttonText}
               >
-                Sign Up
+                Sign up
               </Button>
             </Link>
           </View>

app/(auth)/signup.js

@@ -36,11 +36,14 @@ export default function SignUp() {
   const [password, setPassword] = useState("");
   const [passwordCheck, setPasswordCheck] = useState("");
 
+  const [signUpLoading, setSignUpLoading] = useState(false);
+
   const { showDialog, showSnackBar } = useAlertContext();
 
   const { height } = useWindowDimensions();
 
   async function handleSubmit() {
+    setSignUpLoading(true);
     try {
       if (password !== passwordCheck) {
         throw "Passwords don't match";
@@ -77,6 +80,7 @@ export default function SignUp() {
       console.log(e);
       showDialog("Error", getErrorString(e));
     }
+    setSignUpLoading(false);
   }
 
   const styles = StyleSheet.create({
@@ -186,6 +190,7 @@ export default function SignUp() {
               onPress={handleSubmit}
               buttonColor={themeColors.accent}
               labelStyle={styles.buttonText}
+              loading={signUpLoading}
             >
               Submit
             </Button>

app/content/assignments/players.js

@@ -3,14 +3,7 @@
 import { doc, getDoc, runTransaction, updateDoc } from "firebase/firestore";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ScrollView, View } from "react-native";
-import {
-  ActivityIndicator,
-  Appbar,
-  Button,
-  Icon,
-  List,
-  Text,
-} from "react-native-paper";
+import { Appbar, Button, Icon, List, Text } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { once } from "underscore";
 import { themeColors } from "~/Constants";
@@ -102,7 +95,7 @@
   }, [assignmentList]);
 
   const [loadingDelete, setLoadingDelete] = useState(false);
   const handleDelete = useCallback(
     once(async () => {
       setLoadingDelete(true);
       try {
@@ -409,7 +402,7 @@
             }}
             mode="contained"
             buttonColor={themeColors.accent}
-            textColor="white"
+            textColor={themeColors.highlight}
             disabled={
               !assignmentList.some((assignment) => assignment.markedForDelete)
             }
@@ -420,12 +413,9 @@
               },
             }}
             onPress={handleDelete}
+            loading={loadingDelete}
           >
-            {loadingDelete ? (
-              <ActivityIndicator size={20} color={"#FFF"} />
-            ) : (
-              "Delete"
-            )}
+            Delete
           </Button>
         </View>
       )}

app/content/profile/index.js

@@ -20,7 +20,7 @@
   TouchableOpacity,
   View,
 } from "react-native";
-import { ActivityIndicator, Appbar, Switch } from "react-native-paper";
+import { ActivityIndicator, Appbar, Button, Switch } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { debounce } from "underscore";
 import { themeColors } from "~/Constants";
@@ -96,7 +96,7 @@
     setEmail(userEmail);
   }, [userData, userEmail]);
 
   const handleUpdate = useCallback(
     debounce(
       async () => {
         setUpdateLoading(true);
@@ -267,11 +267,8 @@
     },
     saveChangesButton: {
       backgroundColor: themeColors.accent,
-      paddingHorizontal: 20,
-      paddingVertical: 10,
-      borderRadius: 20,
+      width: 100,
       marginBottom: 20,
-      width: 100, // Increase the width of the button
       alignSelf: "center",
     },
     saveChangesButtonText: {
@@ -451,16 +448,17 @@
             )}
 
             {/* Save Button */}
-            <TouchableOpacity
+            <Button
               style={styles.saveChangesButton}
               onPress={handleUpdate}
+              textColor={themeColors.highlight}
+              labelStyle={{
+                fontWeight: "bold",
+              }}
+              loading={updateLoading}
             >
-              {updateLoading ? (
-                <ActivityIndicator animating={true} size={16} color={"#FFF"} />
-              ) : (
-                <Text style={styles.saveChangesButtonText}>Update</Text>
-              )}
-            </TouchableOpacity>
+              Update
+            </Button>
 
             {/* Sign Out Button */}
             <Pressable onPress={handleSignOut}>

app/content/team/index.js

@@ -82,6 +82,7 @@ function Index() {
 
   const [resetDialogVisible, setResetDialogVisible] = useState(false);
   const hideResetDialog = () => setResetDialogVisible(false);
+  const [resetLoading, setResetLoading] = useState(false);
 
   const [newName, setNewName] = useState("");
 
@@ -222,18 +223,23 @@ function Index() {
         content="Resetting the season will wipe all leaderboards"
         visible={resetDialogVisible}
         onHide={hideResetDialog}
-        buttons={["Cancel", "Reset Season"]}
-        buttonsFunctions={[
-          hideResetDialog,
-          async () => {
-            try {
-              await resetLeaderboards(currentTeamId);
-              await invalidateMultipleKeys(queryClient, [["best_attempts"]]);
-              hideResetDialog();
-            } catch (e) {
-              console.log("Error resetting season:", e);
-              showDialog("Error", getErrorString(e));
-            }
+        buttons={[
+          { children: "Cancel", pressHandler: hideResetDialog },
+          {
+            children: "Reset Season",
+            pressHandler: async () => {
+              setResetLoading(true);
+              try {
+                await resetLeaderboards(currentTeamId);
+                await invalidateMultipleKeys(queryClient, [["best_attempts"]]);
+                hideResetDialog();
+              } catch (e) {
+                console.log("Error resetting season:", e);
+                showDialog("Error", getErrorString(e));
+              }
+              setResetLoading(false);
+            },
+            loading: resetLoading,
           },
         ]}
       />

app/content/team/users/[user]/index.js

@@ -65,9 +65,11 @@ function Index() {
 
   const [removeDialogVisible, setRemoveDialogVisible] = useState(false);
   const hideRemoveDialog = () => setRemoveDialogVisible(false);
+  const [removeLoading, setRemoveLoading] = useState(false);
 
   const [banDialogVisible, setBanDialogVisible] = useState(false);
   const hideBanDialog = () => setBanDialogVisible(false);
+  const [banLoading, setBanLoading] = useState(false);
 
   const { showDialog, showSnackBar } = useAlertContext();
 
@@ -307,23 +309,31 @@ function Index() {
         content="All data will be lost when this user is removed."
         visible={removeDialogVisible}
         onHide={hideRemoveDialog}
-        buttons={["Cancel", "Remove User"]}
-        buttonsFunctions={[
-          hideRemoveDialog,
-          async () => {
-            try {
-              await removeUser(currentTeamId, userId);
-              await queryClient.removeQueries(["userInfo", userId]);
-              await invalidateMultipleKeys(queryClient, [
-                ["userInfo"],
-                ["best_attempts"],
-              ]);
-              navigation.goBack();
-            } catch (e) {
-              console.log("Error removing user:", e);
-              hideRemoveDialog();
-              showDialog("Error", getErrorString(e));
-            }
+        buttons={[
+          {
+            children: "Cancel",
+            pressHandler: hideRemoveDialog,
+          },
+          {
+            children: "Remove User",
+            pressHandler: async () => {
+              setRemoveLoading(true);
+              try {
+                await removeUser(currentTeamId, userId);
+                await queryClient.removeQueries(["userInfo", userId]);
+                await invalidateMultipleKeys(queryClient, [
+                  ["userInfo"],
+                  ["best_attempts"],
+                ]);
+                navigation.goBack();
+              } catch (e) {
+                console.log("Error removing user:", e);
+                hideRemoveDialog();
+                showDialog("Error", getErrorString(e));
+                setRemoveLoading(false);
+              }
+            },
+            loading: removeLoading,
           },
         ]}
       />
@@ -333,23 +343,28 @@ function Index() {
         content="Banning this user will delete all their data and prevent them from joining the team again."
         visible={banDialogVisible}
         onHide={hideBanDialog}
-        buttons={["Cancel", "Ban User"]}
-        buttonsFunctions={[
-          hideBanDialog,
-          async () => {
-            try {
-              await blacklistUser(currentTeamId, userId, userInfo, userEmail);
-              await queryClient.removeQueries(["userInfo", userId]);
-              await invalidateMultipleKeys(queryClient, [
-                ["userInfo"],
-                ["best_attempts"],
-              ]); //invalidate cache
-              navigation.goBack();
-            } catch (e) {
-              console.log("Error banning user:", e);
-              hideBanDialog();
-              showDialog("Error", getErrorString(e));
-            }
+        buttons={[
+          { children: "Cancel", pressHandler: hideBanDialog },
+          {
+            children: "Ban User",
+            pressHandler: async () => {
+              setBanLoading(true);
+              try {
+                await blacklistUser(currentTeamId, userId, userInfo, userEmail);
+                await queryClient.removeQueries(["userInfo", userId]);
+                await invalidateMultipleKeys(queryClient, [
+                  ["userInfo"],
+                  ["best_attempts"],
+                ]); //invalidate cache
+                navigation.goBack();
+              } catch (e) {
+                console.log("Error banning user:", e);
+                hideBanDialog();
+                showDialog("Error", getErrorString(e));
+                setBanLoading(false);
+              }
+            },
+            loading: banLoading,
           },
         ]}
       />

app/segments/(team)/blacklist.js

@@ -1,4 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Button, List } from "react-native-paper";
 import { themeColors } from "~/Constants";
@@ -21,6 +22,8 @@ function Blacklist() {
 
   const queryClient = useQueryClient(); // also called here for updating name
 
+  const [unbanLoading, setUnbanLoading] = useState({});
+
   const invalidateKeys = [["blacklist"]];
 
   if (blacklistIsLoading) return <Loading />;
@@ -52,10 +55,13 @@ function Blacklist() {
                 >
                   <Button
                     onPress={async () => {
+                      setUnbanLoading({ ...unbanLoading, [userId]: true });
                       await removeBlacklist(currentTeamId, userId);
                       await invalidateMultipleKeys(queryClient, invalidateKeys);
+                      setUnbanLoading({ ...unbanLoading, [userId]: false });
                     }}
                     textColor={themeColors.accent}
+                    loading={unbanLoading[userId]}
                   >
                     Unban
                   </Button>