feat: add cloading

src/components/CLoading/CLoading.css

+.cloading__spinner {
+    width: 25px;
+    height: 25px;
+    border: 3px solid rgba(0, 0, 0, 0.1);
+    border-left: 3px solid var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file

src/components/CLoading/CLoading.tsx

+import React from "react";
+import "./CLoading.css";
+
+const CLoading: React.FC = () => {
+  return <div className="cloading__spinner"></div>;
+};
+
+export default CLoading;

src/components/CLoading/index.ts

+export { default } from "./CLoading";

src/pages/Notifications/Notifications.css

@@ -6,6 +6,12 @@
     margin-bottom: 1rem;
 }
 
+.notification__loading {
+    display: flex;
+    justify-content: center;
+    margin: 0.5rem 0;
+}
+
 .notifications__list {
     display: flex;
     flex-direction: column;

src/pages/Notifications/Notifications.tsx

@@ -9,6 +9,7 @@ import { getList } from "../../stores/slices/notificationSlice";
 import { MdBlockFlipped } from "react-icons/md";
 import { IoPhonePortraitOutline } from "react-icons/io5";
 import { useTranslation } from "react-i18next";
+import CLoading from "../../components/CLoading";
 
 const Notifications: React.FC = () => {
   const { t } = useTranslation();
@@ -22,7 +23,7 @@ const Notifications: React.FC = () => {
     return { dateFrom, dateTo };
   };
 
-  const { notifications } = useAppSelector(
+  const { notifications, loading } = useAppSelector(
     (state: RootState) => state.notification
   );
 
@@ -34,26 +35,30 @@ const Notifications: React.FC = () => {
     <div className="notifications">
       <h3 className="notification__title">{t("notification.title")}</h3>
 
+      <div className="notification__loading">
+        {loading && notifications.length === 0 && <CLoading />}
+      </div>
+
+      {!loading && notifications.length === 0 && (
+        <p>{t("notification.empty")}</p>
+      )}
+
       <div className="notifications__list">
-        {notifications.length > 0 ? (
-          notifications.map((notification) => (
-            <div className="notification" key={notification.id}>
-              <div className="notification__caption">
-                <MdBlockFlipped className="notification__caption__icon" />
-                <p>{notification.caption}</p>
-              </div>
-
-              <p className="notification__text">{notification.text}</p>
-
-              <div className="notification__date">
-                <IoPhonePortraitOutline className="notification__date__icon" />
-                {new Date(notification.date).toLocaleString()}
-              </div>
+        {notifications.map((notification) => (
+          <div className="notification" key={notification.id}>
+            <div className="notification__caption">
+              <MdBlockFlipped className="notification__caption__icon" />
+              <p>{notification.caption}</p>
+            </div>
+
+            <p className="notification__text">{notification.text}</p>
+
+            <div className="notification__date">
+              <IoPhonePortraitOutline className="notification__date__icon" />
+              {new Date(notification.date).toLocaleString()}
             </div>
-          ))
-        ) : (
-          <p>{t("notification.empty")}</p>
-        )}
+          </div>
+        ))}
       </div>
     </div>
   );