From 27ce39e6e00ae0c7ed1c2de69bba4c0a5ad49a4f Mon Sep 17 00:00:00 2001
From: Pallavi Das <palldas37@gmail.com>
Date: Tue, 4 Jun 2024 13:45:31 -0700
Subject: [PATCH] added loading icons

---
 frontend/package.json                         |   2 +-
 .../src/components/Friends_List_Component.tsx | 148 +++++++++--------
 frontend/src/components/ItemGroup.tsx         | 150 ++++++++++--------
 frontend/src/pages/IndividualGroupPage.tsx    |  24 ++-
 frontend/src/pages/ItemsPage.tsx              |  30 +++-
 package-lock.json                             |   8 +-
 6 files changed, 216 insertions(+), 146 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index cd2a631..63ec1d4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "dotenv": "^16.4.5",
-    "framer-motion": "^11.1.9",
+    "framer-motion": "^11.2.10",
     "mongoose": "^8.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/frontend/src/components/Friends_List_Component.tsx b/frontend/src/components/Friends_List_Component.tsx
index e4068f0..2e2d088 100644
--- a/frontend/src/components/Friends_List_Component.tsx
+++ b/frontend/src/components/Friends_List_Component.tsx
@@ -19,6 +19,8 @@ import {
   MenuList,
   MenuItem,
   Text,
+  Spinner,
+  Flex,
 } from "@chakra-ui/react";
 import { IGroup } from "../../../backend/models/groupSchema";
 import { IUser } from "../../../backend/models/userSchema";
@@ -46,6 +48,7 @@ const Friends_List: React.FC<Props> = ({
   const [friends, setFriends] = useState<IUser[]>([]);
   const [userId, setUserId] = useState(initialUserId);
   const [errorMessage, setErrorMessage] = useState("");
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchFriendsAndGroups = async () => {
@@ -65,6 +68,8 @@ const Friends_List: React.FC<Props> = ({
         }
       } catch (error) {
         console.error("Error fetching friends:", error);
+      } finally {
+        setLoading(false);
       }
     };
 
@@ -186,74 +191,85 @@ const Friends_List: React.FC<Props> = ({
         </FormControl>
       </Box>
       <TableContainer>
-        <Table variant="simple">
-          <Thead>
-            <Tr>
-              <Th>Friend's Username</Th>
-              <Th>Actions</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {friends.map((friend) => (
-              <Tr key={friend._id.toString()}>
-                <Td>{friend.username}</Td>
-                <Td>
-                  <Box
-                    display="flex"
-                    justifyContent="center"
-                    alignItems="center"
-                  >
-                    <Menu>
-                      <MenuButton
-                        as={Button}
-                        colorScheme="teal"
-                        rightIcon={<FaChevronDown />}
-                      >
-                        Add to Group
-                      </MenuButton>
-                      <MenuList bg="#dfe2e1">
-                        {groups.length > 0 ? (
-                          groups.map((group) => (
-                            <MenuItem
-                              bg="#dfe2e1"
-                              _hover={{ bg: "#bfc2c1" }}
-                              key={group._id.toString()}
-                              onClick={() =>
-                                handleGroupClick(
-                                  group._id.toString(),
-                                  friend._id,
-                                )
-                              }
-                            >
-                              {group.groupName}
-                            </MenuItem>
-                          ))
-                        ) : (
-                          <MenuItem disabled>No groups available</MenuItem>
-                        )}
-                      </MenuList>
-                    </Menu>
-                  </Box>
-                </Td>
-                <Td>
-                  <Button
-                    colorScheme="red"
-                    onClick={() => removeFriend(friend._id.toString())}
-                  >
-                    <DeleteIcon />
-                  </Button>
-                </Td>
-              </Tr>
-            ))}
-            {friends.length === 0 && (
+        {loading ? (
+          <Flex justifyContent="center" alignItems="center" minHeight="200px">
+            <Spinner
+              size="lg"
+              thickness="4px"
+              speed="0.65s"
+              color="var(--col-secondary)"
+            />
+          </Flex>
+        ) : (
+          <Table variant="simple">
+            <Thead>
               <Tr>
-                <Td colSpan={2} textAlign="center">
-                  No friends currently
-                </Td>
+                <Th>Friend's Username</Th>
+                <Th>Actions</Th>
               </Tr>
-            )}
-          </Tbody>
-        </Table>
+            </Thead>
+            <Tbody>
+              {friends.map((friend) => (
+                <Tr key={friend._id.toString()}>
+                  <Td>{friend.username}</Td>
+                  <Td>
+                    <Box
+                      display="flex"
+                      justifyContent="center"
+                      alignItems="center"
+                    >
+                      <Menu>
+                        <MenuButton
+                          as={Button}
+                          colorScheme="teal"
+                          rightIcon={<FaChevronDown />}
+                        >
+                          Add to Group
+                        </MenuButton>
+                        <MenuList bg="#dfe2e1">
+                          {groups.length > 0 ? (
+                            groups.map((group) => (
+                              <MenuItem
+                                bg="#dfe2e1"
+                                _hover={{ bg: "#bfc2c1" }}
+                                key={group._id.toString()}
+                                onClick={() =>
+                                  handleGroupClick(
+                                    group._id.toString(),
+                                    friend._id,
+                                  )
+                                }
+                              >
+                                {group.groupName}
+                              </MenuItem>
+                            ))
+                          ) : (
+                            <MenuItem disabled>No groups available</MenuItem>
+                          )}
+                        </MenuList>
+                      </Menu>
+                    </Box>
+                  </Td>
+                  <Td>
+                    <Button
+                      colorScheme="red"
+                      onClick={() => removeFriend(friend._id.toString())}
+                    >
+                      <DeleteIcon />
+                    </Button>
+                  </Td>
+                </Tr>
+              ))}
+              {friends.length === 0 && (
+                <Tr>
+                  <Td colSpan={2} textAlign="center">
+                    No friends currently
+                  </Td>
+                </Tr>
+              )}
+            </Tbody>
+          </Table>
+        )}
       </TableContainer>
     </Box>
   );
diff --git a/frontend/src/components/ItemGroup.tsx b/frontend/src/components/ItemGroup.tsx
index 083d109..84b8b90 100644
--- a/frontend/src/components/ItemGroup.tsx
+++ b/frontend/src/components/ItemGroup.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Box,
   Heading,
@@ -16,13 +16,15 @@ import {
   MenuItem,
   Button,
   TableContainer,
+  Spinner,
+  Text,
+  Flex,
 } from "@chakra-ui/react";
 import { DeleteIcon } from "@chakra-ui/icons";
 import { FaChevronDown } from "react-icons/fa";
 import { IGroup } from "../../../backend/models/groupSchema";
 import { IBasket } from "../../../backend/models/basketSchema";
 import { IItem } from "../../../backend/models/itemSchema";
-import { useEffect } from "react";
 import EditItem from "./EditItem";
 import NewItemOptions from "./NewItemOptions";
 import {
@@ -131,72 +133,88 @@ const ItemGroup: React.FC<Props> = ({
         </Box>
       </Box>
       <Divider mt={2} mb={4} />
-      <TableContainer>
-        <Table variant="simple" width="full">
-          <Thead>
-            <Tr>
-              <Th width="25%">Name</Th>
-              <Th width="50%">Description</Th>
-              <Th width="8%">More</Th>
-              <Th width="8%">Move</Th>
-              <Th width="9%">Delete</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {!loading && items.length > 0 ? (
-              items.map(
-                (item, index) => (
-                  console.log(item),
-                  (
-                    <Tr key={index}>
-                      <Td width="25%">{item.name}</Td>
-                      <Td width="50%">{item.notes}</Td>
-                      <Td width="8%">
-                        <EditItem itemId={item._id.toString()} />
-                      </Td>
-                      <Td width="8%">
-                        <Menu>
-                          <MenuButton as={Button} rightIcon={<FaChevronDown />}>
-                            Select Basket
-                          </MenuButton>
-                          <MenuList>
-                            {userBaskets.length > 0 ? (
-                              (console.log(userBaskets),
-                              userBaskets.map((basket) => (
-                                <MenuItem
-                                  key={basket._id.toString()}
-                                  onClick={() => handleMove(basket, item)}
-                                  _hover={{ textColor: "black" }}
-                                >
-                                  {basket.basketName}
-                                </MenuItem>
-                              )))
-                            ) : (
-                              <MenuItem disabled>No baskets available</MenuItem>
-                            )}
-                          </MenuList>
-                        </Menu>
-                      </Td>
-                      <Td width="9%">
-                        <IconButton
-                          aria-label="Delete"
-                          icon={<DeleteIcon />}
-                          colorScheme="red"
-                          onClick={() => removeItem(item)}
-                        />
-                      </Td>
-                    </Tr>
-                  )
-                ),
-              )
-            ) : (
+      {loading ? (
+        <Flex justifyContent="center" alignItems="center" minHeight="100px">
+          <Spinner
+            size="lg"
+            thickness="4px"
+            speed="0.65s"
+            color="var(--col-secondary)"
+          />
+        </Flex>
+      ) : (
+        <TableContainer>
+          <Table variant="simple" width="full">
+            <Thead>
               <Tr>
-                <Td colSpan={5}>No items found.</Td>
+                <Th width="25%">Name</Th>
+                <Th width="50%">Description</Th>
+                <Th width="8%">More</Th>
+                <Th width="8%">Move</Th>
+                <Th width="9%">Delete</Th>
               </Tr>
-            )}
-          </Tbody>
-        </Table>
-      </TableContainer>
+            </Thead>
+            <Tbody>
+              {items.length > 0 ? (
+                items.map(
+                  (item, index) => (
+                    console.log(item),
+                    (
+                      <Tr key={index}>
+                        <Td width="25%">{item.name}</Td>
+                        <Td width="50%">{item.notes}</Td>
+                        <Td width="8%">
+                          <EditItem itemId={item._id.toString()} />
+                        </Td>
+                        <Td width="8%">
+                          <Menu>
+                            <MenuButton
+                              as={Button}
+                              rightIcon={<FaChevronDown />}
+                            >
+                              Select Basket
+                            </MenuButton>
+                            <MenuList>
+                              {userBaskets.length > 0 ? (
+                                (console.log(userBaskets),
+                                userBaskets.map((basket) => (
+                                  <MenuItem
+                                    key={basket._id.toString()}
+                                    onClick={() => handleMove(basket, item)}
+                                    _hover={{ textColor: "black" }}
+                                  >
+                                    {basket.basketName}
+                                  </MenuItem>
+                                )))
+                              ) : (
+                                <MenuItem disabled>
+                                  No baskets available
+                                </MenuItem>
+                              )}
+                            </MenuList>
+                          </Menu>
+                        </Td>
+                        <Td width="9%">
+                          <IconButton
+                            aria-label="Delete"
+                            icon={<DeleteIcon />}
+                            colorScheme="red"
+                            onClick={() => removeItem(item)}
+                          />
+                        </Td>
+                      </Tr>
+                    )
+                  ),
+                )
+              ) : (
+                <Tr>
+                  <Td colSpan={5}>No items found.</Td>
+                </Tr>
+              )}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      )}
     </Box>
   );
 };
diff --git a/frontend/src/pages/IndividualGroupPage.tsx b/frontend/src/pages/IndividualGroupPage.tsx
index 35e4616..81503e2 100644
--- a/frontend/src/pages/IndividualGroupPage.tsx
+++ b/frontend/src/pages/IndividualGroupPage.tsx
@@ -10,6 +10,7 @@ import {
   HStack,
   Divider,
   Avatar,
+  Spinner,
 } from "@chakra-ui/react";
 import { IoArrowBack } from "react-icons/io5";
 import { IGroup } from "../../../backend/models/groupSchema";
@@ -138,7 +139,7 @@ const IndividualGroupPage: React.FC<Props> = ({
   }, [loading]);
 
   const dateObj = group ? new Date(group?.created) : undefined;
-  
+
   return (
     <Box
       width="100vw"
@@ -187,7 +188,22 @@ const IndividualGroupPage: React.FC<Props> = ({
         alignItems="center"
       >
         {loading ? (
-          <Box padding="20px">Loading...</Box>
+          <Flex
+            direction="column"
+            align="center"
+            justify="center"
+            height="100%"
+          >
+            <Spinner
+              size="xl"
+              thickness="4px"
+              speed="0.65s"
+              color="var(--col-secondary)"
+            />
+            <Text mt={4} fontSize="lg" color="var(--col-dark)">
+              Loading group details, please wait...
+            </Text>
+          </Flex>
         ) : group ? (
           <>
             <Box
@@ -276,9 +292,7 @@ const IndividualGroupPage: React.FC<Props> = ({
                       <Heading size="md" marginBottom="10px">
                         Created On
                       </Heading>
-                      <Text>
-                        {dateObj ? dateObj.toString() : ""}
-                      </Text>
+                      <Text>{dateObj ? dateObj.toString() : ""}</Text>
                     </Box>
                     <Box
                       padding="10px"
diff --git a/frontend/src/pages/ItemsPage.tsx b/frontend/src/pages/ItemsPage.tsx
index e4e8fac..8c574bd 100644
--- a/frontend/src/pages/ItemsPage.tsx
+++ b/frontend/src/pages/ItemsPage.tsx
@@ -1,5 +1,14 @@
 import React, { useEffect } from "react";
-import { Box, Flex, HStack, Heading, Icon, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  HStack,
+  Heading,
+  Icon,
+  VStack,
+  Spinner,
+  Text,
+} from "@chakra-ui/react";
 import ItemGroup from "../components/ItemGroup";
 import { Link, useNavigate } from "react-router-dom";
 import { IUser } from "../../../backend/models/userSchema";
@@ -120,9 +129,22 @@ const ItemsPage: React.FC<Props> = ({
               );
             })
           ) : (
-            <Heading as="h2" size="md">
-              Loading...
-            </Heading>
+            <Flex
+              direction="column"
+              align="center"
+              justify="center"
+              height="100%"
+            >
+              <Spinner
+                size="xl"
+                thickness="4px"
+                speed="0.65s"
+                color="var(--col-secondary)"
+              />
+              <Text mt={4} fontSize="lg" color="var(--col-dark)">
+                Loading your items, please wait...
+              </Text>
+            </Flex>
           )}
         </VStack>
       </Flex>
diff --git a/package-lock.json b/package-lock.json
index 98c561e..0fca910 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "dotenv": "^16.4.5",
-        "framer-motion": "^11.1.9",
+        "framer-motion": "^11.2.10",
         "mongoose": "^8.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -5224,9 +5224,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.6.tgz",
-      "integrity": "sha512-XUrjjBt57e5YoHQtjwc3eNchFBuHvIgN/cS8SC4oIaAn2J/0+bLanUxXizidJKZVeHJam/JrmMnPRjYMglVn5g==",
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+      "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },