animated

package-lock.json

@@ -20,6 +20,7 @@
         "i18next-browser-languagedetector": "^7.1.0",
         "i18next-http-backend": "^2.2.1",
         "react": "^18.2.0",
+        "react-countup": "^6.5.0",
         "react-dom": "^18.2.0",
         "react-i18next": "^13.0.1",
         "react-microsoft-clarity": "^1.2.0",
@@ -8128,6 +8129,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -18490,6 +18496,17 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-countup": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.0.tgz",
+      "integrity": "sha512-26JFHbUHsHxu8SetkJwWVIUEkaNnrj4P9msxNGC8tS4hGr1bngRzbwtJYOgXD2G/ItjaKJ3JfYKd85sw7qRVeA==",
+      "dependencies": {
+        "countup.js": "^2.8.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-http-backend": "^2.2.1",
     "react": "^18.2.0",
+    "react-countup": "^6.5.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.1",
     "react-microsoft-clarity": "^1.2.0",

src/Pages/Store/Employees/index.js

@@ -28,6 +28,7 @@ import {
   MyUsernameFormInput,
 } from "../../../Components/MyFormInputs";
 import { Link, useParams } from "react-router-dom";
+import CountUp from "react-countup";
 
 const { useBreakpoint } = Grid;
 
@@ -166,8 +167,10 @@ export default function StoreEmployees() {
       >
         <h1>
           {t("employees.pageTitle")}
-          {requestData.employees.length > 0 &&
+
-            ` (${requestData.employees.length})`}
+          {" ("}
+          <CountUp end={requestData.employees.length} duration={1} />
+          {")"}
         </h1>
 
         <ModalAddEditEmployee