начал добавлять прогресс бар

frontend/package.json

@@ -17,6 +17,7 @@
     "mobx": "^6.11.0",
     "mobx-react-lite": "^4.0.5",
     "mobx-state-tree": "^5.3.0",
+    "progressbar.js": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.0",
@@ -27,6 +28,7 @@
     "sort-by": "^0.0.2"
   },
   "devDependencies": {
+    "@types/progressbar.js": "^1.1.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

frontend/src/UIComponents/CustomProgressBar/CustomProgressBar.tsx

@@ -0,0 +1,32 @@
+import React, {useEffect} from 'react';
+import ProgressBar from "progressbar.js";
+
+interface IPropTypes {
+    containerName: string;
+}
+
+const CustomProgressBar: React.FC<IPropTypes> = ({containerName}) => {
+
+    useEffect(() => {
+        const container = document.querySelector(`#${containerName}`);
+        console.log(container)
+
+        if (container && container.children.length === 0) {
+            new ProgressBar.Line(`#${containerName}`, {
+                strokeWidth: 4,
+                easing: 'easeInOut',
+                duration: 1400,
+                color: '#FFEA82',
+                trailColor: '#eee',
+                trailWidth: 1,
+                svgStyle: {width: '100%', height: '100%'}
+            });
+        }
+    }, [containerName])
+
+    return (
+        <div id={`#${containerName}`}></div>
+    );
+};
+
+export default CustomProgressBar;

frontend/src/components/authentication/AuthForm.tsx

@@ -11,6 +11,7 @@ import {observer} from "mobx-react-lite";
 import authStore from "../../store/authStore.ts";
 import auth from "../../utils/auth.ts";
 import Starfield from "react-starfield";
+import CustomProgressBar from "../../UIComponents/CustomProgressBar/CustomProgressBar.tsx";
 
 export type FormValues = {
     login: string,
@@ -74,6 +75,9 @@ const AuthForm: React.FC = observer(() => {
                 />
 
                 <input type="submit" className="auth__btn" value="ВОЙТИ"/>
+                <div id="user-progress">
+                    <CustomProgressBar containerName="user-progress"/>
+                </div>
             </form>
         </div>
     );

frontend/src/components/mapMenu/MapMenu.tsx

@@ -1,13 +1,20 @@
 import React, {useEffect, useState} from 'react';
-import authStore from "../../store/authStore.ts";
 import {useNavigate} from "react-router-dom";
+
 import './../../styles/mapMenu.scss'
-import {observer} from "mobx-react-lite";
+
 import {IUserType} from "../../types/UserType.ts";
 import axios from "axios";
+
 import EmployeeMap from "./EmployeeMap/EmployeeMap.tsx";
+
 import SuperUserMap from "./SuperUserMap/SuperUserMap.tsx";
+
+import {observer} from "mobx-react-lite";
+
+import authStore from "../../store/authStore.ts";
 import superUserStore from "../../store/superUserStore.ts";
+
 import Starfield from "react-starfield";
 
 const MapMenu: React.FC = observer(() => {
@@ -16,7 +23,6 @@ const MapMenu: React.FC = observer(() => {
     const [user, setUser] = useState<IUserType>()
     const [formattedDate, setFormattedDate] = useState("")
 
-
     useEffect(() => {
         axios.get("http://localhost:8000/users/").then((response) => {
             response.data.map((user: IUserType) => {
@@ -33,7 +39,7 @@ const MapMenu: React.FC = observer(() => {
                 setFormattedDate(`${date.getDay()}.${date.getMonth()}.${date.getUTCFullYear()}`)
             }
         })
-    }, [])
+    }, [user])
 
     useEffect(() => {
         if (!authStore.isUserAuthorized)