feat(performance): enhance application performance with optimizations and monitoring

- Updated package dependencies for improved localization support and performance. - Introduced CSS performance optimizations to prevent layout shifts and enhance rendering efficiency. - Implemented asset preloading and lazy loading strategies for critical components to improve load times. - Enhanced translation loading with optimized caching and background loading strategies. - Added performance monitoring utilities to track key metrics and improve user experience. - Refactored task management components to utilize new performance features and ensure efficient rendering. - Introduced new utility functions for asset and CSS optimizations to streamline resource management.
2025-07-10 20:39:15 +05:30
parent cf686ef8c5
commit 94977f7255
15 changed files with 3572 additions and 133 deletions
--- a/worklenz-frontend/package-lock.json
+++ b/worklenz-frontend/package-lock.json
@@ -34,8 +34,9 @@
        "gantt-task-react": "^0.3.9",
        "html2canvas": "^1.4.1",
        "i18next": "^23.16.8",
-        "i18next-browser-languagedetector": "^8.0.3",
+        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-http-backend": "^2.7.3",
+        "i18next-localstorage-backend": "^4.2.0",
        "jspdf": "^3.0.0",
        "mixpanel-browser": "^2.56.0",
        "nanoid": "^5.1.5",
@@ -728,6 +729,8 @@
      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@csstools/css-calc": "^2.1.3",
        "@csstools/css-color-parser": "^3.0.9",
@@ -741,7 +744,9 @@
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
      "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "optional": true,
+      "peer": true
    },
    "node_modules/@babel/code-frame": {
      "version": "7.27.1",
@@ -1051,6 +1056,8 @@
        }
      ],
      "license": "MIT-0",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -1071,6 +1078,8 @@
        }
      ],
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -1095,6 +1104,8 @@
        }
      ],
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@csstools/color-helpers": "^5.0.2",
        "@csstools/css-calc": "^2.1.4"
@@ -1123,6 +1134,8 @@
        }
      ],
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -1146,6 +1159,8 @@
        }
      ],
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -2997,6 +3012,8 @@
      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">= 14"
      }
@@ -3738,6 +3755,8 @@
      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@asamuzakjp/css-color": "^3.2.0",
        "rrweb-cssom": "^0.8.0"
@@ -3758,6 +3777,8 @@
      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "whatwg-mimetype": "^4.0.0",
        "whatwg-url": "^14.0.0"
@@ -3772,6 +3793,8 @@
      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "punycode": "^2.3.1"
      },
@@ -3785,6 +3808,8 @@
      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
      "dev": true,
      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -3795,6 +3820,8 @@
      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "tr46": "^5.1.0",
        "webidl-conversions": "^7.0.0"
@@ -3841,7 +3868,9 @@
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/deep-eql": {
      "version": "5.0.2",
@@ -4016,6 +4045,8 @@
      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
      "dev": true,
      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=0.12"
      },
@@ -4499,6 +4530,8 @@
      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "whatwg-encoding": "^3.1.1"
      },
@@ -4534,6 +4567,8 @@
      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "agent-base": "^7.1.0",
        "debug": "^4.3.4"
@@ -4548,6 +4583,8 @@
      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "agent-base": "^7.1.2",
        "debug": "4"
@@ -4586,9 +4623,9 @@
      }
    },
    "node_modules/i18next-browser-languagedetector": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.1.0.tgz",
-      "integrity": "sha512-mHZxNx1Lq09xt5kCauZ/4bsXOEA2pfpwSoU11/QTJB+pD94iONFwp+ohqi///PwiFvjFOxe1akYCdHyFo1ng5Q==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.23.2"
@@ -4603,12 +4640,23 @@
        "cross-fetch": "4.0.0"
      }
    },
+    "node_modules/i18next-localstorage-backend": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-localstorage-backend/-/i18next-localstorage-backend-4.2.0.tgz",
+      "integrity": "sha512-vglEQF0AnLriX7dLA2drHnqAYzHxnLwWQzBDw8YxcIDjOvYZz5rvpal59Dq4In+IHNmGNM32YgF0TDjBT0fHmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
@@ -4729,7 +4777,9 @@
      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/isexe": {
      "version": "2.0.0",
@@ -4818,6 +4868,8 @@
      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "cssstyle": "^4.2.1",
        "data-urls": "^5.0.0",
@@ -4858,6 +4910,8 @@
      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "punycode": "^2.3.1"
      },
@@ -4871,6 +4925,8 @@
      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
      "dev": true,
      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -4881,6 +4937,8 @@
      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "tr46": "^5.1.0",
        "webidl-conversions": "^7.0.0"
@@ -4895,6 +4953,8 @@
      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=10.0.0"
      },
@@ -5533,7 +5593,9 @@
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.20.tgz",
      "integrity": "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/object-assign": {
      "version": "4.1.1",
@@ -5595,6 +5657,8 @@
      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "entities": "^6.0.0"
      },
@@ -6060,6 +6124,8 @@
      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=6"
      }
@@ -7205,7 +7271,9 @@
      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/rrweb-snapshot": {
      "version": "2.0.0-alpha.18",
@@ -7253,7 +7321,9 @@
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/saxes": {
      "version": "6.0.0",
@@ -7261,6 +7331,8 @@
      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
      "dev": true,
      "license": "ISC",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "xmlchars": "^2.2.0"
      },
@@ -7663,7 +7735,9 @@
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/tailwindcss": {
      "version": "3.4.17",
@@ -7883,6 +7957,8 @@
      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "tldts-core": "^6.1.86"
      },
@@ -7895,7 +7971,9 @@
      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
@@ -7921,6 +7999,8 @@
      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
      "dev": true,
      "license": "BSD-3-Clause",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "tldts": "^6.1.32"
      },
@@ -8284,6 +8364,8 @@
      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "xml-name-validator": "^5.0.0"
      },
@@ -8318,6 +8400,8 @@
      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "iconv-lite": "0.6.3"
      },
@@ -8331,6 +8415,8 @@
      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
      "dev": true,
      "license": "MIT",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -8487,6 +8573,8 @@
      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
      "dev": true,
      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -8496,7 +8584,9 @@
      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
    },
    "node_modules/xmlhttprequest-ssl": {
      "version": "2.1.2",