calendar loader added

src/components/global/CalendarCell.tsx

@@ -1,4 +1,5 @@
 // Modules
+import { v4 as uuidv4 } from "uuid";
 import React, { useEffect, useState } from "react";
 
 // Helpers
@@ -11,6 +12,9 @@ import sharp from "../../icons/sharp.svg";
 // Types
 import { dayType, dayStateType, monthType } from "../../types/calendarTypes";
 
+// Components
+import WhiteLoader from "./WhiteLoader";
+
 interface Props {
   setSelectedDay: dayStateType[1];
   selectedDay: dayType;
@@ -75,13 +79,19 @@ const CalendarCell = ({
           <h5>{`${element} ${matchLocaleLang(
             currentMonth
           )} ${currentYear}`}</h5>
-          <span>
-            {dateEvent.data
-              ? dateEvent.data[0].length !== 0
-                ? dateEvent.data[0]
-                : ""
-              : "Нет событий"}
-          </span>
+          <div>
+            {dateEvent.data ? (
+              dateEvent.data[0].length !== 0 ? (
+                dateEvent.data.map((el) => {
+                  return <span key={uuidv4()}>{el}</span>;
+                })
+              ) : (
+                <WhiteLoader className="calendar-spinner" />
+              )
+            ) : (
+              "Нет событий"
+            )}
+          </div>
         </div>
       ) : (
         ""

src/components/global/WhiteLoader.tsx

@@ -0,0 +1,25 @@
+// Modules
+
+// Types
+interface Props {
+  className: string;
+}
+
+const WhiteLoader = ({ className }: Props) => {
+  return (
+    <div className={`${className}`}>
+      <svg className="spinner-white" viewBox="0 0 50 50">
+        <circle
+          className="path"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          strokeWidth="5"
+        ></circle>
+      </svg>
+    </div>
+  );
+};
+
+export default WhiteLoader;

src/styles/_loader.scss

@@ -20,3 +20,54 @@
   width: 9rem;
   height: 9rem;
 }
+
+.calendar-spinner {
+  margin: 2rem 0;
+  width: 100%;
+  height: 100%;
+  align-items: flex-end;
+  position: relative;
+
+  svg {
+    width: 4rem;
+    height: 4rem;
+  }
+}
+
+.spinner-white {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+
+  & .path {
+    stroke: hsl(210, 70, 75);
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

src/validators/validateEmail.ts

@@ -1,6 +1,6 @@
 export const validateEmail = (email: string): boolean => {
   const mailReg: RegExp =
-    /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   if (!mailReg.test(email)) {
     return false;
   }