Added global loading animation, instead of a specific one for feed lo…

…ad. The loading animation can be configured with different animations and sizes. Applied this loading animation to the feed load and to the groups load.
sympoll · Aug 26, 2024 · 245b886 · 245b886
1 parent 7fddb90
commit 245b886
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 103 deletions.
diff --git a/src/assets/styles/basics/_LoadingAnimation.scss b/src/assets/styles/basics/_LoadingAnimation.scss
@@ -0,0 +1,69 @@
+.content-loading-container {
+  @include flex-column;
+  height: fit-content;
+  font-family: $secondaryFont;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8%;
+}
+
+.content-loading-icon {
+  transform: scale(0.8);
+  padding: 0;
+}
+
+.content-loading-message {
+  display: flex;
+  width: fit-content;
+  font-size: 20px;
+  font-family: $secondaryFont;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  gap: 6px;
+
+  .dots {
+    right: -1.15em;
+    width: 1em;
+    text-align: left;
+
+    & > span {
+      display: inline-block;
+      opacity: 0;
+      animation: blink 0.6s infinite;
+    }
+
+    .dot1 {
+      animation-delay: 0s;
+    }
+    .dot2 {
+      animation-delay: 0.2s;
+    }
+    .dot3 {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+@keyframes blink {
+  0%,
+  20% {
+    opacity: 1;
+  }
+  80%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes blink {
+  0%,
+  20% {
+    opacity: 1;
+  }
+  80%,
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/assets/styles/cmps/feed-page/_FeedContent.scss b/src/assets/styles/cmps/feed-page/_FeedContent.scss
@@ -42,74 +42,6 @@
   background-color: $secondaryBgColor0;
 }
 
-.feed-content-loading-container {
-  @include flex-column;
-  height: fit-content;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  margin-top: 8%;
-}
-
-.feed-content-loading-icon {
-  transform: scale(0.8);
-  padding: 0;
-}
-
-.feed-content-loading-message {
-  font-size: 20px;
-  font-family: $secondaryFont;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  .dots {
-    position: absolute;
-    right: -1.15em;
-    width: 1em;
-    text-align: left;
-
-    & > span {
-      display: inline-block;
-      opacity: 0;
-      animation: blink 0.6s infinite;
-    }
-
-    .dot1 {
-      animation-delay: 0s;
-    }
-    .dot2 {
-      animation-delay: 0.2s;
-    }
-    .dot3 {
-      animation-delay: 0.4s;
-    }
-  }
-}
-
-@keyframes blink {
-  0%,
-  20% {
-    opacity: 1;
-  }
-  80%,
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes blink {
-  0%,
-  20% {
-    opacity: 1;
-  }
-  80%,
-  100% {
-    opacity: 0;
-  }
-}
-
 .feed-content-error-fetching-polls-container {
   text-align: center;
   @include flex-column;

diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -9,6 +9,7 @@
 @import "basics/animations.scss";
 @import "basics/CustomButton";
 @import "basics/CloseButton";
+@import "basics/LoadingAnimation";
 
 // ** Effects **
 @import "effects/ripple-loading";

diff --git a/src/cmps/feed/FeedContent.tsx b/src/cmps/feed/FeedContent.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import Poll from "./poll/Poll";
 import { fetchAllUserGroupsPolls, fetchPollsByGroupId } from "../../services/poll.service";
 import { PollData } from "../../models/PollData.model";
-import FeedLoadingAnimation from "./messege/FeedLoadingAnimation";
+import FeedLoadingAnimation from "../global/LoadingAnimation";
 import FeedErrorMessage from "./messege/FeedErrorMessage";
 import { useParams, matchPath, useLocation } from "react-router-dom";
 import { getSamplePolls } from "../../services/demo.data.service";
@@ -80,7 +80,7 @@ export default function FeedContent() {
   //   </div>
   // );
 
-  if (isLoading) return <FeedLoadingAnimation />;
+  if (isLoading) return <FeedLoadingAnimation message="Feed is loading" dots="off" />;
   if (!polls) {
     return <FeedErrorMessage error={error} />;
   }

diff --git a/src/cmps/feed/messege/FeedLoadingAnimation.tsx b/src/cmps/feed/messege/FeedLoadingAnimation.tsx
diff --git a/src/cmps/global/LoadingAnimation.tsx b/src/cmps/global/LoadingAnimation.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+interface LoadingAnimationProps {
+  message: string;
+  messageFontSize?: string;
+  ripple?: "on" | "off";
+  dots?: "on" | "off";
+}
+
+export default function LoadingAnimation({
+  message,
+  messageFontSize = "20px",
+  ripple = "on",
+  dots = "on"
+}: LoadingAnimationProps) {
+  return (
+    <div className="content-loading-container">
+      <div className="content-loading-message" style={{ fontSize: messageFontSize }}>
+        {message}
+        {dots === "on" && (
+          <span className="dots">
+            <span className="dot1">.</span>
+            <span className="dot2">.</span>
+            <span className="dot3">.</span>
+          </span>
+        )}
+      </div>
+      {ripple === "on" && (
+        <div className="content-loading-icon">
+          <div className="lds-ripple">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/cmps/sidebar/GroupsSidebar.tsx b/src/cmps/sidebar/GroupsSidebar.tsx
@@ -7,8 +7,12 @@ import CreateGroupButton from "../global/CreateGroupButton";
 import CreateGroupPopup from "../popup/CreateGroupPopup";
 import { GroupData } from "../../models/GroupData.model";
 import { fetchUserGroups } from "../../services/group.service";
+import FeedLoadingAnimation from "../global/LoadingAnimation";
+import { useParams } from "react-router-dom";
 
 export default function GroupsSidebar() {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
   // TODO: change username to the current user
 
   // Temporary hard coded user ID
@@ -17,10 +21,16 @@ export default function GroupsSidebar() {
   const [groups, setGroups] = useState<GroupData[]>();
 
   useEffect(() => {
-    fetchUserGroups(userId).then((data) => {
-      console.log("Fetching user groups data: ", data);
-      setGroups(data);
-    });
+    fetchUserGroups(userId)
+      .then((data) => {
+        console.log("Fetching user groups data: ", data);
+        setGroups(data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching user groups data.");
+        setIsLoading(false);
+      });
   }, []);
 
   const [isPopupOpen, setIsPopupOpen] = useState<boolean>(false);
@@ -33,13 +43,17 @@ export default function GroupsSidebar() {
       <UserInfoSidebarItem username="Moishe" email="moishe@gmail.com" />
       <ul className="groups-sidebar-groups-list">
         <GroupsSidebarItem title="All Groups" Icon={FormatListBulletedIcon} path="/feed" />
-        {groups?.map((group) => (
-          <GroupsSidebarItem
-            title={group.groupName}
-            Icon={GroupsIcon}
-            path={"/feed/" + group.groupId}
-          />
-        ))}
+        {isLoading && (
+          <FeedLoadingAnimation message="Loading groups" messageFontSize="16px" ripple="off" />
+        )}
+        {!isLoading &&
+          groups?.map((group) => (
+            <GroupsSidebarItem
+              title={group.groupName}
+              Icon={GroupsIcon}
+              path={"/feed/" + group.groupId}
+            />
+          ))}
       </ul>
       <CreateGroupButton onClick={openPopup} />
       {isPopupOpen && <CreateGroupPopup userId={userId} onClose={closePopup} groups={groups} />}