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

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,17 +1,17 @@
 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";
 import ToDosList from "./ToDosList";
-import { Dimensions, ScrollView, StyleSheet } from "react-native";
+import { Dimensions, ScrollView, StyleSheet} from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
 import UserChoresProgress from "./user-chores/UserChoresProgress";
 import { useAtom } from "jotai";
 import { toDosPageIndex } from "../calendar/atoms";
-import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 
 const ToDosPage = () => {
   const { profileData } = useAuthContext();
@@ -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 && (