update

package.json

@@ -15,6 +15,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.12.0",
+    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",

src/components/AppBar/AppBar.styled.jsx

@@ -5,6 +5,7 @@ export const Header = styled.header`
   margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 16px;
 `;
 
 export const NavigationMenu = styled.ul`

src/components/ContactForm/ContactForm.jsx

@@ -3,10 +3,10 @@ import {
   Label,
   Input,
   SubmitButton,
-  Group,
-  RadioContainer,
-  RaioDiv,
-  RadioInput,
+  // Group,
+  // RadioContainer,
+  // RaioDiv,
+  // RadioInput,
 } from './ContactForm.styled';
 
 export const ContactForm = () => {

src/components/ContactsList/ContactsList.jsx

@@ -13,15 +13,19 @@ import {
 } from '../../redux/contacts/contactsOperations';
 
 import { MdDelete } from 'react-icons/md';
+import { IoIosContacts } from 'react-icons/io';
+import { IconContext } from 'react-icons';
+
 import {
   List,
   Item,
   Container,
-  Name,
-  Number,
+  ContactData,
   DeleteContactBtn,
 } from './ContactsList.styled';
 
+import { HourglassLoader } from 'components/Loader/Loader';
+
 export const ContactsList = () => {
   const contacts = useSelector(selectContacts);
   const filter = useSelector(selectFilterValue);
@@ -49,28 +53,34 @@ export const ContactsList = () => {
 
   return (
     <>
-      {isLoading && <p>Loading...</p>}
+      {isLoading ? (
+        <HourglassLoader />
+      ) : (
+        <List>
+          {visibleContacts.map(({ id, name, number }) => (
+            <Item key={id}>
+              <IconContext.Provider value={{ color: '#283044', size: 40 }}>
+                <IoIosContacts />
+              </IconContext.Provider>
+              <Container>
+                <ContactData>{name}</ContactData>
+                <ContactData>{number}</ContactData>
+              </Container>
+              <DeleteContactBtn
+                type="button"
+                onClick={() => {
+                  dispatch(deleteContactAction(id));
+                }}
+              >
+                <IconContext.Provider value={{ color: '#283044', size: 40 }}>
+                  <MdDelete />
+                </IconContext.Provider>
+              </DeleteContactBtn>
+            </Item>
+          ))}
+        </List>
+      )}
       {error && <p>Something went wrong!. Try again later</p>}
-      <List>
-        {visibleContacts.map(({ id, name, number, avatar }) => (
-          <Item key={id}>
-            {/* <RiContactsFill /> */}
-            <img src={avatar} alt="avatar" width="52" />
-            <Container>
-              <Name>{name}</Name>
-              <Number>{number}</Number>
-            </Container>
-            <DeleteContactBtn
-              type="button"
-              onClick={() => {
-                dispatch(deleteContactAction(id));
-              }}
-            >
-              <MdDelete />
-            </DeleteContactBtn>
-          </Item>
-        ))}
-      </List>
     </>
   );
 };

src/components/ContactsList/ContactsList.styled.jsx

@@ -1,30 +1,33 @@
 import styled from '@emotion/styled';
 
-export const List = styled.ul``;
+export const List = styled.ul`
+  background-color: #7ad9f7;
+  padding: 32px;
+  border-radius: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: center;
+`;
+
 export const Item = styled.li`
-  margin-bottom: 16px;
+  width: 360px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 16px;
-  border: 1px solid rgb(224, 160, 31);
   border-radius: 8px;
+  background-color: #e9af3d;
 `;
 
 export const Container = styled.div``;
 
-export const Name = styled.p`
+export const ContactData = styled.p`
   font-size: 20px;
-  font-weight: 600;
+  color: #000000;
   margin-bottom: 4px;
 `;
 
-export const Number = styled.p`
-  margin-bottom: 4px;
-`;
 export const DeleteContactBtn = styled.button`
-  background-color: #a1c487;
-  height: 40px;
-  padding: 8px 20px;
-  cursor: pointer;
+  background-color: transparent;
 `;

src/components/Loader/Loader.jsx

@@ -0,0 +1,18 @@
+import { Hourglass } from 'react-loader-spinner';
+import { LoaderContainer } from './Loader.styled';
+
+export const HourglassLoader = () => {
+  return (
+    <LoaderContainer>
+      <Hourglass
+        visible={true}
+        height="200"
+        width="200"
+        ariaLabel="hourglass-loading"
+        wrapperStyle={{}}
+        wrapperClass=""
+        colors={['#1dacd6', '#e9af3d']}
+      />
+    </LoaderContainer>
+  );
+};

src/components/Loader/Loader.styled.jsx

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const LoaderContainer = styled.div`
+  width: 200px;
+  margin: auto;
+`;

src/index.css

@@ -40,7 +40,7 @@ body {
   background: #283044;
 }
 body::-webkit-scrollbar {
-  width: 2px;
+  width: 8px;
 }
 
 body::-webkit-scrollbar-track {

src/pages/ContactsPage/ContactsPage.jsx

@@ -1,10 +1,10 @@
-import { ContactForm } from 'components/ContactForm/ContactForm';
+// import { ContactForm } from 'components/ContactForm/ContactForm';
 import { ContactsList } from 'components/ContactsList/ContactsList';
 
 const ContactsPage = () => {
   return (
     <>
-      <ContactForm />
+      {/* <ContactForm /> */}
       <ContactsList />
     </>
   );

src/pages/HomePage/HomePage.jsx

@@ -2,11 +2,17 @@ import { useSelector } from 'react-redux';
 import authSelectors from '../../redux/auth/authSelectors';
 
 import { Title } from './HomePage.styled';
+import { HourglassLoader } from 'components/Loader/Loader';
 
 const HomePage = () => {
   const name = useSelector(authSelectors.selectUserName);
 
-  return <Title>Hello {name}</Title>;
+  return (
+    <>
+      <Title>Hello {name}</Title>
+      <HourglassLoader />
+    </>
+  );
 };
 
 export default HomePage;