- Added loading indicators when on groceries and todos, fixed margin issues in the todo page

components/pages/grocery/GroceryList.tsx

@@ -1,8 +1,8 @@
-import {FlatList, StyleSheet} from "react-native";
+import { ActivityIndicator, Dimensions, FlatList, StyleSheet } from "react-native";
 import React, { useEffect, useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native-ui-lib";
 import GroceryItem from "./GroceryItem";
-import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
+import { GroceryCategory, GroceryFrequency, useGroceryContext } from "@/contexts/GroceryContext";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import { AntDesign } from "@expo/vector-icons";
 import EditGroceryItem from "./EditGroceryItem";
@@ -32,6 +32,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
         setIsAddingGrocery,
         addGrocery,
     } = useGroceryContext();
+
     const { profileData } = useAuthContext();
     const [approvedGroceries, setApprovedGroceries] = useState<IGrocery[]>(
         groceries?.filter((item) => item.approved)
@@ -105,6 +106,12 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
     }
 
     return (
+        <>
+            {!groceries &&
+                <View style={styles.loaderContainer}>
+                    <ActivityIndicator size="large" color="grey" />
+                </View>
+            }
             <View marginH-20 marginB-45>
                 <HeaderTemplate
                     message={"Welcome to your grocery list"}
@@ -304,6 +311,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
                     <Text style={styles.noItemTxt}>No approved items.</Text>
                 )}
             </View>
+        </>
     );
 };
 
@@ -326,7 +334,16 @@ const styles = StyleSheet.create({
     counterNr: {
         fontFamily: "PlusJakartaSans_600SemiBold",
         fontSize: 14
-    }
+    },
+    loaderContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: Dimensions.get("window").height,
+        width: Dimensions.get("window").width,
+        backgroundColor: 'rgba(218,217,217,0.6)',
+        zIndex: 999,
+    },
 });
 
 export default GroceryList;

components/pages/todos/ToDoItem.tsx

@@ -223,6 +223,7 @@ const ToDoItem = (props: {
           {selectedMembers?.map((member) => {
             return member?.pfp ? (
               <ImageBackground
+                key={member?.uid}
                 source={{ uri: member.pfp }}
                 style={{
                   height: 24.64,

components/pages/todos/ToDosList.tsx

@@ -8,7 +8,7 @@ import {IToDo} from "@/hooks/firebase/types/todoData";
 import DropdownIcon from "@/assets/svgs/DropdownIcon";
 import {Dropdown} from "react-native-element-dropdown";
 import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
-import {StyleSheet} from "react-native";
+import {ActivityIndicator, Dimensions, StyleSheet} from "react-native";
 import {UserProfile} from "@/hooks/firebase/types/profileTypes";
 
 const FILTER_OPTIONS = {
@@ -296,8 +296,14 @@ const ToDosList = ({ isSettings, members }: { isSettings?: boolean, members?: Ar
     );
   };
 
+  const containerHeight = Dimensions.get('screen').height;
   return (
-    <View marginB-402>
+    <View style={{ marginBottom: 110  }} >
+        {!toDos &&
+            <View style={styles.loaderContainer}>
+                <ActivityIndicator size="large" color="blue" />
+            </View>
+        }
         <Dropdown
             style={{ marginBottom: 15 }}
             data={filterOptions}
@@ -379,6 +385,12 @@ const styles = StyleSheet.create({
     },
     dropdownStyle: { borderRadius: 6.61, minHeight: 10, maxHeight: "100%", width: 187 },
     itemStyle: { padding: 0, margin: 0 },
+    loaderContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 999,
+    },
 });
 
 export default ToDosList;

components/pages/todos/ToDosPage.tsx

@@ -1,5 +1,5 @@
 import { Button, Text, View } from "react-native-ui-lib";
-import React, { useState } from "react";
+import React  from "react";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import AddChore from "./AddChore";
 import ProgressCard from "./ProgressCard";
@@ -19,7 +19,7 @@ const ToDosPage = () => {
 
     const { data: members } = useGetFamilyMembers();
 
-  const { width, height } = Dimensions.get("screen");
+  const { width } = Dimensions.get("screen");
   const pageLink = (
     <TouchableOpacity onPress={() => setPageIndex(1)}>
       <Text color="#ea156d" style={{ fontSize: 14 }}>
@@ -35,7 +35,6 @@ const ToDosPage = () => {
       >
         <View
           paddingH-25
-          height={"100%"}
           width={width}
         >
           {pageIndex == 0 && (