From 965dda6226de5eea2ac5233cd43b4f3fbad08bb7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 13 Nov 2024 12:02:15 +0530
Subject: [PATCH 1/4] chore: loader code refactor

---
 web/core/components/pages/loaders/page-loader.tsx             | 2 +-
 web/core/components/ui/loader/cycle-module-board-loader.tsx   | 2 +-
 web/core/components/ui/loader/cycle-module-list-loader.tsx    | 2 +-
 .../ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx  | 2 +-
 web/core/components/ui/loader/notification-loader.tsx         | 2 +-
 web/core/components/ui/loader/pages-loader.tsx                | 4 ++--
 web/core/components/ui/loader/projects-loader.tsx             | 2 +-
 web/core/components/ui/loader/settings/activity.tsx           | 2 +-
 web/core/components/ui/loader/settings/api-token.tsx          | 2 +-
 web/core/components/ui/loader/settings/email.tsx              | 2 +-
 web/core/components/ui/loader/settings/import-and-export.tsx  | 2 +-
 web/core/components/ui/loader/settings/integration.tsx        | 2 +-
 web/core/components/ui/loader/settings/members.tsx            | 2 +-
 web/core/components/ui/loader/view-list-loader.tsx            | 2 +-
 .../components/workspace-notifications/sidebar/loader.tsx     | 2 +-
 15 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/core/components/pages/loaders/page-loader.tsx b/web/core/components/pages/loaders/page-loader.tsx
index e2e0c09b42f..3e77e020db0 100644
--- a/web/core/components/pages/loaders/page-loader.tsx
+++ b/web/core/components/pages/loaders/page-loader.tsx
@@ -17,7 +17,7 @@ export const PageLoader: React.FC = (props) => {
         </Loader>
       </div>
       <div>
-        {Array.from(Array(10)).map((i) => (
+        {Array.from(Array(10)).map((_, i) => (
           <Loader key={i} className="relative flex items-center gap-2 p-3 py-4 border-b border-custom-border-100">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
             <div className="ml-auto relative flex items-center gap-2">
diff --git a/web/core/components/ui/loader/cycle-module-board-loader.tsx b/web/core/components/ui/loader/cycle-module-board-loader.tsx
index f88719c381a..bd74218ca70 100644
--- a/web/core/components/ui/loader/cycle-module-board-loader.tsx
+++ b/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -2,7 +2,7 @@ export const CycleModuleBoardLayout = () => (
   <div className="h-full w-full animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
-        {[...Array(5)].map((i) => (
+        {[...Array(5)].map((_, i) => (
           <div
             key={i}
             className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
diff --git a/web/core/components/ui/loader/cycle-module-list-loader.tsx b/web/core/components/ui/loader/cycle-module-list-loader.tsx
index 522b96f0da7..fdd0628ae8f 100644
--- a/web/core/components/ui/loader/cycle-module-list-loader.tsx
+++ b/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -2,7 +2,7 @@ export const CycleModuleListLayout = () => (
   <div className="h-full overflow-y-auto animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="flex h-full w-full flex-col overflow-y-auto">
-        {[...Array(5)].map((i) => (
+        {[...Array(5)].map((_, i) => (
           <div
             key={i}
             className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
diff --git a/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
index 01da38f6a61..e32eb68870a 100644
--- a/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export const InboxSidebarLoader = () => (
   <div className="flex flex-col">
-    {[...Array(6)].map((i, index) => (
+    {[...Array(6)].map((_, index) => (
       <div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
         <div className="flex flex-col gap-2">
           <span className="h-5 w-16 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/notification-loader.tsx b/web/core/components/ui/loader/notification-loader.tsx
index 7485c2c4c39..fc0ffe11efc 100644
--- a/web/core/components/ui/loader/notification-loader.tsx
+++ b/web/core/components/ui/loader/notification-loader.tsx
@@ -1,6 +1,6 @@
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {[...Array(3)].map((i) => (
+    {[...Array(3)].map((_, i) => (
       <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">
diff --git a/web/core/components/ui/loader/pages-loader.tsx b/web/core/components/ui/loader/pages-loader.tsx
index 612c17d888a..b8748a1dee5 100644
--- a/web/core/components/ui/loader/pages-loader.tsx
+++ b/web/core/components/ui/loader/pages-loader.tsx
@@ -4,12 +4,12 @@ export const PagesLoader = () => (
       <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
     </div>
     <div className="flex items-center gap-3">
-      {[...Array(5)].map((i) => (
+      {[...Array(5)].map((_, i) => (
         <span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
       ))}
     </div>
     <div className="divide-y divide-custom-border-200">
-      {[...Array(5)].map((i) => (
+      {[...Array(5)].map((_, i) => (
         <div key={i} className="h-12 w-full flex items-center justify-between px-3">
           <div className="flex items-center gap-1.5">
             <span className="h-5 w-5 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/projects-loader.tsx b/web/core/components/ui/loader/projects-loader.tsx
index d1a781d6b71..fd4fb4b7a3d 100644
--- a/web/core/components/ui/loader/projects-loader.tsx
+++ b/web/core/components/ui/loader/projects-loader.tsx
@@ -1,7 +1,7 @@
 export const ProjectsLoader = () => (
   <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
     <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-      {[...Array(3)].map((i) => (
+      {[...Array(3)].map((_, i) => (
         <div
           key={i}
           className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
diff --git a/web/core/components/ui/loader/settings/activity.tsx b/web/core/components/ui/loader/settings/activity.tsx
index 70297f64486..0a2f91e2690 100644
--- a/web/core/components/ui/loader/settings/activity.tsx
+++ b/web/core/components/ui/loader/settings/activity.tsx
@@ -2,7 +2,7 @@ import { getRandomLength } from "../utils";
 
 export const ActivitySettingsLoader = () => (
   <div className="flex flex-col gap-3 animate-pulse">
-    {[...Array(10)].map((i) => (
+    {[...Array(10)].map((_, i) => (
       <div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
         <span className="h-6 w-6 bg-custom-background-80 rounded" />
         <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
diff --git a/web/core/components/ui/loader/settings/api-token.tsx b/web/core/components/ui/loader/settings/api-token.tsx
index e31090bffd9..6282fa59539 100644
--- a/web/core/components/ui/loader/settings/api-token.tsx
+++ b/web/core/components/ui/loader/settings/api-token.tsx
@@ -5,7 +5,7 @@ export const APITokenSettingsLoader = () => (
       <span className="h-8 w-28 bg-custom-background-80 rounded" />
     </div>
     <div className="divide-y-[0.5px] divide-custom-border-200">
-      {[...Array(2)].map((i) => (
+      {[...Array(2)].map((_, i) => (
         <div key={i} className="flex flex-col gap-2 px-4 py-3">
           <div className="flex items-center gap-2">
             <span className="h-5 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/email.tsx b/web/core/components/ui/loader/settings/email.tsx
index 87634bf090a..e005b08462f 100644
--- a/web/core/components/ui/loader/settings/email.tsx
+++ b/web/core/components/ui/loader/settings/email.tsx
@@ -8,7 +8,7 @@ export const EmailSettingsLoader = () => (
       <div className="flex items-center py-3">
         <span className="h-7 w-32 bg-custom-background-80 rounded" />
       </div>
-      {[...Array(4)].map((i) => (
+      {[...Array(4)].map((_, i) => (
         <div key={i} className="flex items-center justify-between">
           <div className="flex flex-col gap-2 py-3">
             <span className="h-6 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/import-and-export.tsx b/web/core/components/ui/loader/settings/import-and-export.tsx
index a3561207d11..e6c95d2cc6b 100644
--- a/web/core/components/ui/loader/settings/import-and-export.tsx
+++ b/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -1,6 +1,6 @@
 export const ImportExportSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
-    {[...Array(2)].map((i) => (
+    {[...Array(2)].map((_, i) => (
       <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
         <div className="flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
diff --git a/web/core/components/ui/loader/settings/integration.tsx b/web/core/components/ui/loader/settings/integration.tsx
index 2260517ee39..c88569c34ff 100644
--- a/web/core/components/ui/loader/settings/integration.tsx
+++ b/web/core/components/ui/loader/settings/integration.tsx
@@ -1,6 +1,6 @@
 export const IntegrationsSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(2)].map((i) => (
+    {[...Array(2)].map((_, i) => (
       <div
         key={i}
         className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
diff --git a/web/core/components/ui/loader/settings/members.tsx b/web/core/components/ui/loader/settings/members.tsx
index e286320a90a..7272f6c2f21 100644
--- a/web/core/components/ui/loader/settings/members.tsx
+++ b/web/core/components/ui/loader/settings/members.tsx
@@ -1,6 +1,6 @@
 export const MembersSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(4)].map((i) => (
+    {[...Array(4)].map((_, i) => (
       <div key={i} className="group flex items-center justify-between px-3 py-4">
         <div className="flex items-center gap-x-4 gap-y-2">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
diff --git a/web/core/components/ui/loader/view-list-loader.tsx b/web/core/components/ui/loader/view-list-loader.tsx
index 8b59b57a264..68e9b96fd8e 100644
--- a/web/core/components/ui/loader/view-list-loader.tsx
+++ b/web/core/components/ui/loader/view-list-loader.tsx
@@ -1,6 +1,6 @@
 export const ViewListLoader = () => (
   <div className="flex h-full w-full flex-col animate-pulse">
-    {[...Array(8)].map((i) => (
+    {[...Array(8)].map((_, i) => (
       <div key={i} className="group border-b border-custom-border-200">
         <div className="relative flex w-full items-center justify-between rounded p-4">
           <div className="flex items-center gap-4">
diff --git a/web/core/components/workspace-notifications/sidebar/loader.tsx b/web/core/components/workspace-notifications/sidebar/loader.tsx
index 9889b221d70..d74096b3a75 100644
--- a/web/core/components/workspace-notifications/sidebar/loader.tsx
+++ b/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -1,6 +1,6 @@
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {[...Array(8)].map((i) => (
+    {[...Array(8)].map((_, i) => (
       <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">

From f14065bb6f57711821a15b39f9b20fe907720cd6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 13 Nov 2024 13:07:07 +0530
Subject: [PATCH 2/4] chore: code refactor

---
 packages/ui/src/dropdown/common/loader.tsx               | 5 +++--
 .../projects/(detail)/[projectId]/settings/sidebar.tsx   | 3 ++-
 .../dashboard/widgets/loaders/issues-by-state-group.tsx  | 3 ++-
 .../dashboard/widgets/loaders/overview-stats.tsx         | 3 ++-
 .../dashboard/widgets/loaders/recent-activity.tsx        | 3 ++-
 .../dashboard/widgets/loaders/recent-collaborators.tsx   | 3 ++-
 .../dashboard/widgets/loaders/recent-projects.tsx        | 3 ++-
 web/core/components/issues/workspace-draft/loader.tsx    | 3 ++-
 .../components/ui/loader/cycle-module-board-loader.tsx   | 4 +++-
 .../components/ui/loader/cycle-module-list-loader.tsx    | 4 +++-
 .../ui/loader/layouts/calendar-layout-loader.tsx         | 9 +++++----
 .../components/ui/loader/layouts/gantt-layout-loader.tsx | 9 +++++----
 .../ui/loader/layouts/kanban-layout-loader.tsx           | 3 ++-
 .../components/ui/loader/layouts/list-layout-loader.tsx  | 5 +++--
 .../ui/loader/layouts/members-layout-loader.tsx          | 5 +++--
 .../layouts/project-inbox/inbox-sidebar-loader.tsx       | 3 ++-
 .../ui/loader/layouts/spreadsheet-layout-loader.tsx      | 7 ++++---
 web/core/components/ui/loader/notification-loader.tsx    | 4 +++-
 web/core/components/ui/loader/pages-loader.tsx           | 6 ++++--
 web/core/components/ui/loader/projects-loader.tsx        | 4 +++-
 web/core/components/ui/loader/settings/activity.tsx      | 3 ++-
 web/core/components/ui/loader/settings/api-token.tsx     | 4 +++-
 web/core/components/ui/loader/settings/email.tsx         | 4 +++-
 .../components/ui/loader/settings/import-and-export.tsx  | 4 +++-
 web/core/components/ui/loader/settings/integration.tsx   | 4 +++-
 web/core/components/ui/loader/settings/members.tsx       | 4 +++-
 web/core/components/ui/loader/view-list-loader.tsx       | 4 +++-
 web/core/components/web-hooks/form/secret-key.tsx        | 3 ++-
 .../workspace-notifications/sidebar/loader.tsx           | 4 +++-
 29 files changed, 82 insertions(+), 41 deletions(-)

diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/ui/src/dropdown/common/loader.tsx
index 0ec1f053b68..73421b2ae7f 100644
--- a/packages/ui/src/dropdown/common/loader.tsx
+++ b/packages/ui/src/dropdown/common/loader.tsx
@@ -1,9 +1,10 @@
+import range from "lodash/range";
 import React from "react";
 
 export const DropdownOptionsLoader = () => (
   <div className="flex flex-col gap-1 animate-pulse">
-    {Array.from({ length: 6 }, (_, i) => (
-      <div key={i} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
+    {range(6).map((_, index) => (
+      <div key={index} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
     ))}
   </div>
 );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
index c3aa909adb4..1ef0279107e 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import range from "lodash/range";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -29,7 +30,7 @@ export const ProjectSettingsSidebar = observer(() => {
         <div className="flex flex-col gap-2">
           <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
           <Loader className="flex w-full flex-col gap-2">
-            {[...Array(8)].map((index) => (
+            {range(8).map((_, index) => (
               <Loader.Item key={index} height="34px" />
             ))}
           </Loader>
diff --git a/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
index d44eb1e26cc..44ce9326416 100644
--- a/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
+++ b/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import range from "lodash/range";
 // ui
 import { Loader } from "@plane/ui";
 
@@ -14,7 +15,7 @@ export const IssuesByStateGroupWidgetLoader = () => (
         </div>
       </div>
       <div className="w-1/2 space-y-7 flex-shrink-0">
-        {Array.from({ length: 5 }).map((_, index) => (
+        {range(5).map((_, index) => (
           <Loader.Item key={index} height="11px" width="100%" />
         ))}
       </div>
diff --git a/web/core/components/dashboard/widgets/loaders/overview-stats.tsx b/web/core/components/dashboard/widgets/loaders/overview-stats.tsx
index 2b634792ea4..43cedd348b1 100644
--- a/web/core/components/dashboard/widgets/loaders/overview-stats.tsx
+++ b/web/core/components/dashboard/widgets/loaders/overview-stats.tsx
@@ -1,11 +1,12 @@
 "use client";
 
+import range from "lodash/range";
 // ui
 import { Loader } from "@plane/ui";
 
 export const OverviewStatsWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl py-6 grid grid-cols-4 gap-36 px-12">
-    {Array.from({ length: 4 }).map((_, index) => (
+    {range(4).map((_, index) => (
       <div key={index} className="space-y-3">
         <Loader.Item height="11px" width="50%" />
         <Loader.Item height="15px" />
diff --git a/web/core/components/dashboard/widgets/loaders/recent-activity.tsx b/web/core/components/dashboard/widgets/loaders/recent-activity.tsx
index 3a280dad70c..9d7d65a0468 100644
--- a/web/core/components/dashboard/widgets/loaders/recent-activity.tsx
+++ b/web/core/components/dashboard/widgets/loaders/recent-activity.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import range from "lodash/range";
 // ui
 import { Loader } from "@plane/ui";
 
 export const RecentActivityWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl p-6 space-y-6">
     <Loader.Item height="17px" width="35%" />
-    {Array.from({ length: 7 }).map((_, index) => (
+    {range(7).map((_, index) => (
       <div key={index} className="flex items-start gap-3.5">
         <div className="flex-shrink-0">
           <Loader.Item height="16px" width="16px" />
diff --git a/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx b/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx
index 92715fb88ec..9f9217ead49 100644
--- a/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx
+++ b/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx
@@ -1,11 +1,12 @@
 "use client";
 
+import range from "lodash/range";
 // ui
 import { Loader } from "@plane/ui";
 
 export const RecentCollaboratorsWidgetLoader = () => (
   <>
-    {Array.from({ length: 8 }).map((_, index) => (
+    {range(8).map((_, index) => (
       <Loader key={index} className="bg-custom-background-100 rounded-xl px-6 pb-12">
         <div className="space-y-11 flex flex-col items-center">
           <div className="rounded-full overflow-hidden h-[69px] w-[69px]">
diff --git a/web/core/components/dashboard/widgets/loaders/recent-projects.tsx b/web/core/components/dashboard/widgets/loaders/recent-projects.tsx
index 8bd652c3b18..4b51284a33f 100644
--- a/web/core/components/dashboard/widgets/loaders/recent-projects.tsx
+++ b/web/core/components/dashboard/widgets/loaders/recent-projects.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import range from "lodash/range";
 // ui
 import { Loader } from "@plane/ui";
 
 export const RecentProjectsWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl p-6 space-y-6">
     <Loader.Item height="17px" width="35%" />
-    {Array.from({ length: 5 }).map((_, index) => (
+    {range(5).map((_, index) => (
       <div key={index} className="flex items-center gap-6">
         <div className="flex-shrink-0">
           <Loader.Item height="60px" width="60px" />
diff --git a/web/core/components/issues/workspace-draft/loader.tsx b/web/core/components/issues/workspace-draft/loader.tsx
index d663a0d035e..fa013a40d79 100644
--- a/web/core/components/issues/workspace-draft/loader.tsx
+++ b/web/core/components/issues/workspace-draft/loader.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FC } from "react";
+import range from "lodash/range";
 // components
 import { ListLoaderItemRow } from "@/components/ui";
 
@@ -12,7 +13,7 @@ export const WorkspaceDraftIssuesLoader: FC<TWorkspaceDraftIssuesLoader> = (prop
   const { items = 14 } = props;
   return (
     <div className="relative h-full w-full">
-      {[...Array(items)].map((_, index) => (
+      {range(items).map((_, index) => (
         <ListLoaderItemRow key={index} />
       ))}
     </div>
diff --git a/web/core/components/ui/loader/cycle-module-board-loader.tsx b/web/core/components/ui/loader/cycle-module-board-loader.tsx
index bd74218ca70..b4f878a63af 100644
--- a/web/core/components/ui/loader/cycle-module-board-loader.tsx
+++ b/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -1,8 +1,10 @@
+import range from "lodash/range";
+
 export const CycleModuleBoardLayout = () => (
   <div className="h-full w-full animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
-        {[...Array(5)].map((_, i) => (
+        {range(5).map((_, i) => (
           <div
             key={i}
             className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
diff --git a/web/core/components/ui/loader/cycle-module-list-loader.tsx b/web/core/components/ui/loader/cycle-module-list-loader.tsx
index fdd0628ae8f..b6e75671799 100644
--- a/web/core/components/ui/loader/cycle-module-list-loader.tsx
+++ b/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -1,8 +1,10 @@
+import range from "lodash/range";
+
 export const CycleModuleListLayout = () => (
   <div className="h-full overflow-y-auto animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="flex h-full w-full flex-col overflow-y-auto">
-        {[...Array(5)].map((_, i) => (
+        {range(5).map((_, i) => (
           <div
             key={i}
             className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
diff --git a/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx b/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
index dfd18a38919..47b1488cbc2 100644
--- a/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -1,8 +1,9 @@
+import range from "lodash/range";
 import { getRandomInt } from "../utils";
 
 const CalendarDay = () => {
   const dataCount = getRandomInt(0, 1);
-  const dataBlocks = Array.from({ length: dataCount }, (_, index) => (
+  const dataBlocks = range(dataCount).map((_, index) => (
     <span key={index} className="h-8 w-full bg-custom-background-80 rounded mb-2" />
   ));
 
@@ -19,15 +20,15 @@ const CalendarDay = () => {
 export const CalendarLayoutLoader = () => (
   <div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
     <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
-      {[...Array(5)].map((_, index) => (
+      {range(5).map((_, index) => (
         <span key={index} className="h-11 w-full bg-custom-background-80" />
       ))}
     </span>
     <div className="h-full w-full overflow-y-auto">
       <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200 overflow-y-auto">
-        {[...Array(6)].map((_, index) => (
+        {range(6).map((_, index) => (
           <div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
-            {[...Array(5)].map((_, index) => (
+            {range(5).map((_, index) => (
               <CalendarDay key={index} />
             ))}
           </div>
diff --git a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index bb4cd47e270..9d61a140c98 100644
--- a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -1,9 +1,10 @@
+import range from "lodash/range";
 import { Row } from "@plane/ui";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
 import { getRandomLength } from "../utils";
 
 export const GanttLayoutLIstItem = () => (
-  <div className="flex flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
+  <div className="flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
     <div className="px-3 h-6 w-8 bg-custom-background-80 rounded" />
     <div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
   </div>
@@ -23,7 +24,7 @@ export const GanttLayoutLoader = () => (
           </div>
         </Row>
         <Row className="flex flex-col gap-3 h-11 py-4 w-full">
-          {[...Array(6)].map((_, index) => (
+          {range(6).map((_, index) => (
             <div key={index} className="flex items-center gap-3  h-11 w-full">
               <span className="h-6 w-6 bg-custom-background-80 rounded" />
               <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
@@ -37,13 +38,13 @@ export const GanttLayoutLoader = () => (
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
           </div>
           <div className="flex items-center gap-3 justify-between w-full">
-            {[...Array(15)].map((_, index) => (
+            {range(15).map((_, index) => (
               <span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
             ))}
           </div>
         </div>
         <div className="flex flex-col gap-3 h-11 p-4 w-full">
-          {[...Array(6)].map((_, index) => (
+          {range(6).map((_, index) => (
             <div
               key={index}
               className={`flex items-center gap-3 h-11 w-full`}
diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index 93e5c10fbc9..af11d763c42 100644
--- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+import range from "lodash/range";
 import { cn } from "@plane/editor";
 import { ContentWrapper } from "@plane/ui";
 
@@ -32,7 +33,7 @@ export const KanbanColumnLoader = ({
         </div>
       </div>
     )}
-    {Array.from({ length: cardsInColumn }, (_, cardIndex) => (
+    {range(cardsInColumn).map((_, cardIndex) => (
       <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
     ))}
   </div>
diff --git a/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index bcada037068..81ba74ab67c 100644
--- a/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -1,4 +1,5 @@
 import { Fragment, forwardRef } from "react";
+import range from "lodash/range";
 import { cn } from "@plane/editor";
 import { Row } from "@plane/ui";
 import { getRandomInt, getRandomLength } from "../utils";
@@ -29,7 +30,7 @@ export const ListLoaderItemRow = forwardRef<
       />
     </div>
     <div className="flex items-center gap-2">
-      {[...Array(defaultPropertyCount)].map((_, index) => (
+      {range(defaultPropertyCount).map((_, index) => (
         <Fragment key={index}>
           {getRandomInt(1, 2) % 2 === 0 ? (
             <span
@@ -64,7 +65,7 @@ const ListSection = ({ itemCount }: { itemCount: number }) => (
       </div>
     </Row>
     <div className="relative h-full w-full">
-      {[...Array(itemCount)].map((_, index) => (
+      {range(itemCount).map((_, index) => (
         <ListLoaderItemRow key={index} />
       ))}
     </div>
diff --git a/web/core/components/ui/loader/layouts/members-layout-loader.tsx b/web/core/components/ui/loader/layouts/members-layout-loader.tsx
index ae8363556f4..2a7ac4ccd34 100644
--- a/web/core/components/ui/loader/layouts/members-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/members-layout-loader.tsx
@@ -1,11 +1,12 @@
+import range from "lodash/range";
 export const MembersLayoutLoader = () => (
   <div className="flex gap-5 py-1.5 overflow-x-auto">
-    {Array.from({ length: 5 }, (_, columnIndex) => (
+    {range(5).map((_, columnIndex) => (
       <div key={columnIndex} className="flex flex-col gap-3">
         <div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
           <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
         </div>
-        {Array.from({ length: 2 }, (_, cardIndex) => (
+        {range(2).map((_, cardIndex) => (
           <span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
         ))}
       </div>
diff --git a/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
index e32eb68870a..38d36295d75 100644
--- a/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -1,8 +1,9 @@
 import React from "react";
+import range from "lodash/range";
 
 export const InboxSidebarLoader = () => (
   <div className="flex flex-col">
-    {[...Array(6)].map((_, index) => (
+    {range(6).map((_, index) => (
       <div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
         <div className="flex flex-col gap-2">
           <span className="h-5 w-16 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index 370f731edc6..2bbc040408e 100644
--- a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -1,3 +1,4 @@
+import range from "lodash/range";
 import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
@@ -11,7 +12,7 @@ export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
         />
       </Row>
     </td>
-    {[...Array(props.columnCount)].map((_, colIndex) => (
+    {range(props.columnCount).map((_, colIndex) => (
       <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
         <div className="flex items-center justify-center gap-3 px-3">
           <span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
@@ -27,7 +28,7 @@ export const SpreadsheetLayoutLoader = () => (
       <thead>
         <tr>
           <th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
-          {[...Array(10)].map((_, index) => (
+          {range(10).map((_, index) => (
             <th
               key={index}
               className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
@@ -36,7 +37,7 @@ export const SpreadsheetLayoutLoader = () => (
         </tr>
       </thead>
       <tbody>
-        {[...Array(16)].map((_, rowIndex) => (
+        {range(16).map((_, rowIndex) => (
           <SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
         ))}
       </tbody>
diff --git a/web/core/components/ui/loader/notification-loader.tsx b/web/core/components/ui/loader/notification-loader.tsx
index fc0ffe11efc..db91cccf335 100644
--- a/web/core/components/ui/loader/notification-loader.tsx
+++ b/web/core/components/ui/loader/notification-loader.tsx
@@ -1,6 +1,8 @@
+import range from "lodash/range";
+
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {[...Array(3)].map((_, i) => (
+    {range(3).map((_, i) => (
       <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">
diff --git a/web/core/components/ui/loader/pages-loader.tsx b/web/core/components/ui/loader/pages-loader.tsx
index b8748a1dee5..d3ba95bd0ec 100644
--- a/web/core/components/ui/loader/pages-loader.tsx
+++ b/web/core/components/ui/loader/pages-loader.tsx
@@ -1,15 +1,17 @@
+import range from "lodash/range";
+
 export const PagesLoader = () => (
   <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
     <div className="flex justify-between gap-4">
       <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
     </div>
     <div className="flex items-center gap-3">
-      {[...Array(5)].map((_, i) => (
+      {range(5).map((_, i) => (
         <span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
       ))}
     </div>
     <div className="divide-y divide-custom-border-200">
-      {[...Array(5)].map((_, i) => (
+      {range(5).map((_, i) => (
         <div key={i} className="h-12 w-full flex items-center justify-between px-3">
           <div className="flex items-center gap-1.5">
             <span className="h-5 w-5 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/projects-loader.tsx b/web/core/components/ui/loader/projects-loader.tsx
index fd4fb4b7a3d..996f9d08ec6 100644
--- a/web/core/components/ui/loader/projects-loader.tsx
+++ b/web/core/components/ui/loader/projects-loader.tsx
@@ -1,7 +1,9 @@
+import range from "lodash/range";
+
 export const ProjectsLoader = () => (
   <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
     <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-      {[...Array(3)].map((_, i) => (
+      {range(3).map((_, i) => (
         <div
           key={i}
           className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
diff --git a/web/core/components/ui/loader/settings/activity.tsx b/web/core/components/ui/loader/settings/activity.tsx
index 0a2f91e2690..258da7111a8 100644
--- a/web/core/components/ui/loader/settings/activity.tsx
+++ b/web/core/components/ui/loader/settings/activity.tsx
@@ -1,8 +1,9 @@
+import range from "lodash/range";
 import { getRandomLength } from "../utils";
 
 export const ActivitySettingsLoader = () => (
   <div className="flex flex-col gap-3 animate-pulse">
-    {[...Array(10)].map((_, i) => (
+    {range(10).map((_, i) => (
       <div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
         <span className="h-6 w-6 bg-custom-background-80 rounded" />
         <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
diff --git a/web/core/components/ui/loader/settings/api-token.tsx b/web/core/components/ui/loader/settings/api-token.tsx
index 6282fa59539..f15e92b440d 100644
--- a/web/core/components/ui/loader/settings/api-token.tsx
+++ b/web/core/components/ui/loader/settings/api-token.tsx
@@ -1,3 +1,5 @@
+import range from "lodash/range";
+
 export const APITokenSettingsLoader = () => (
   <section className="w-full overflow-y-auto py-8 pr-9">
     <div className="mb-2 flex items-center justify-between border-b border-custom-border-200 py-3.5">
@@ -5,7 +7,7 @@ export const APITokenSettingsLoader = () => (
       <span className="h-8 w-28 bg-custom-background-80 rounded" />
     </div>
     <div className="divide-y-[0.5px] divide-custom-border-200">
-      {[...Array(2)].map((_, i) => (
+      {range(2).map((_, i) => (
         <div key={i} className="flex flex-col gap-2 px-4 py-3">
           <div className="flex items-center gap-2">
             <span className="h-5 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/email.tsx b/web/core/components/ui/loader/settings/email.tsx
index e005b08462f..902309fec7e 100644
--- a/web/core/components/ui/loader/settings/email.tsx
+++ b/web/core/components/ui/loader/settings/email.tsx
@@ -1,3 +1,5 @@
+import range from "lodash/range";
+
 export const EmailSettingsLoader = () => (
   <div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb- animate-pulse">
     <div className="flex flex-col gap-2 pt-6 mb-2 pb-6 border-b border-custom-border-100">
@@ -8,7 +10,7 @@ export const EmailSettingsLoader = () => (
       <div className="flex items-center py-3">
         <span className="h-7 w-32 bg-custom-background-80 rounded" />
       </div>
-      {[...Array(4)].map((_, i) => (
+      {range(4).map((_, i) => (
         <div key={i} className="flex items-center justify-between">
           <div className="flex flex-col gap-2 py-3">
             <span className="h-6 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/import-and-export.tsx b/web/core/components/ui/loader/settings/import-and-export.tsx
index e6c95d2cc6b..d7211b6fb9c 100644
--- a/web/core/components/ui/loader/settings/import-and-export.tsx
+++ b/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -1,6 +1,8 @@
+import range from "lodash/range";
+
 export const ImportExportSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
-    {[...Array(2)].map((_, i) => (
+    {range(2).map((_, i) => (
       <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
         <div className="flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
diff --git a/web/core/components/ui/loader/settings/integration.tsx b/web/core/components/ui/loader/settings/integration.tsx
index c88569c34ff..279437031a9 100644
--- a/web/core/components/ui/loader/settings/integration.tsx
+++ b/web/core/components/ui/loader/settings/integration.tsx
@@ -1,6 +1,8 @@
+import range from "lodash/range";
+
 export const IntegrationsSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(2)].map((_, i) => (
+    {range(2).map((_, i) => (
       <div
         key={i}
         className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
diff --git a/web/core/components/ui/loader/settings/members.tsx b/web/core/components/ui/loader/settings/members.tsx
index 7272f6c2f21..58d2db2fdf1 100644
--- a/web/core/components/ui/loader/settings/members.tsx
+++ b/web/core/components/ui/loader/settings/members.tsx
@@ -1,6 +1,8 @@
+import range from "lodash/range";
+
 export const MembersSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(4)].map((_, i) => (
+    {range(4).map((_, i) => (
       <div key={i} className="group flex items-center justify-between px-3 py-4">
         <div className="flex items-center gap-x-4 gap-y-2">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
diff --git a/web/core/components/ui/loader/view-list-loader.tsx b/web/core/components/ui/loader/view-list-loader.tsx
index 68e9b96fd8e..7e8dd61bd6a 100644
--- a/web/core/components/ui/loader/view-list-loader.tsx
+++ b/web/core/components/ui/loader/view-list-loader.tsx
@@ -1,6 +1,8 @@
+import range from "lodash/range";
+
 export const ViewListLoader = () => (
   <div className="flex h-full w-full flex-col animate-pulse">
-    {[...Array(8)].map((_, i) => (
+    {range(8).map((_, i) => (
       <div key={i} className="group border-b border-custom-border-200">
         <div className="relative flex w-full items-center justify-between rounded p-4">
           <div className="flex items-center gap-4">
diff --git a/web/core/components/web-hooks/form/secret-key.tsx b/web/core/components/web-hooks/form/secret-key.tsx
index cbe5ea79986..9b49f4ac6fc 100644
--- a/web/core/components/web-hooks/form/secret-key.tsx
+++ b/web/core/components/web-hooks/form/secret-key.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, FC } from "react";
+import range from "lodash/range";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
@@ -102,7 +103,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
                   <p className="text-xs">{webhookSecretKey}</p>
                 ) : (
                   <div className="flex items-center gap-1.5 overflow-hidden mr-2">
-                    {[...Array(30)].map((_, index) => (
+                    {range(30).map((_, index) => (
                       <div key={index} className="h-1 w-1 rounded-full bg-custom-text-400 flex-shrink-0" />
                     ))}
                   </div>
diff --git a/web/core/components/workspace-notifications/sidebar/loader.tsx b/web/core/components/workspace-notifications/sidebar/loader.tsx
index d74096b3a75..c8a0e5ce75e 100644
--- a/web/core/components/workspace-notifications/sidebar/loader.tsx
+++ b/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -1,6 +1,8 @@
+import range from "lodash/range";
+
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {[...Array(8)].map((_, i) => (
+    {range(8).map((_, i) => (
       <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">

From 3588d8df9a9f9c134c597fa84de655fe73d56a71 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 13 Nov 2024 13:08:20 +0530
Subject: [PATCH 3/4] chore: code refactor

---
 web/core/components/pages/loaders/page-loader.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/core/components/pages/loaders/page-loader.tsx b/web/core/components/pages/loaders/page-loader.tsx
index 3e77e020db0..5f8e7e95ffc 100644
--- a/web/core/components/pages/loaders/page-loader.tsx
+++ b/web/core/components/pages/loaders/page-loader.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import range from "lodash/range";
 import { Loader } from "@plane/ui";
 
 export const PageLoader: React.FC = (props) => {
@@ -17,7 +18,7 @@ export const PageLoader: React.FC = (props) => {
         </Loader>
       </div>
       <div>
-        {Array.from(Array(10)).map((_, i) => (
+        {range(10).map((_, i) => (
           <Loader key={i} className="relative flex items-center gap-2 p-3 py-4 border-b border-custom-border-100">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
             <div className="ml-auto relative flex items-center gap-2">

From 5a4a4847ea3910b555647ed2e689c3073c80809e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 13 Nov 2024 13:22:02 +0530
Subject: [PATCH 4/4] chore: code refactor

---
 packages/ui/src/dropdown/common/loader.tsx                | 2 +-
 .../projects/(detail)/[projectId]/settings/sidebar.tsx    | 2 +-
 .../dashboard/widgets/loaders/issues-by-state-group.tsx   | 2 +-
 .../dashboard/widgets/loaders/overview-stats.tsx          | 2 +-
 .../dashboard/widgets/loaders/recent-activity.tsx         | 2 +-
 .../dashboard/widgets/loaders/recent-collaborators.tsx    | 2 +-
 .../dashboard/widgets/loaders/recent-projects.tsx         | 2 +-
 web/core/components/issues/workspace-draft/loader.tsx     | 2 +-
 web/core/components/pages/loaders/page-loader.tsx         | 2 +-
 .../components/ui/loader/cycle-module-board-loader.tsx    | 2 +-
 .../components/ui/loader/cycle-module-list-loader.tsx     | 2 +-
 .../ui/loader/layouts/calendar-layout-loader.tsx          | 8 ++++----
 .../components/ui/loader/layouts/gantt-layout-loader.tsx  | 6 +++---
 .../components/ui/loader/layouts/kanban-layout-loader.tsx | 2 +-
 .../components/ui/loader/layouts/list-layout-loader.tsx   | 4 ++--
 .../ui/loader/layouts/members-layout-loader.tsx           | 4 ++--
 .../loader/layouts/project-inbox/inbox-sidebar-loader.tsx | 2 +-
 .../ui/loader/layouts/spreadsheet-layout-loader.tsx       | 6 +++---
 web/core/components/ui/loader/notification-loader.tsx     | 2 +-
 web/core/components/ui/loader/pages-loader.tsx            | 4 ++--
 web/core/components/ui/loader/projects-loader.tsx         | 2 +-
 web/core/components/ui/loader/settings/activity.tsx       | 2 +-
 web/core/components/ui/loader/settings/api-token.tsx      | 2 +-
 web/core/components/ui/loader/settings/email.tsx          | 2 +-
 .../components/ui/loader/settings/import-and-export.tsx   | 2 +-
 web/core/components/ui/loader/settings/integration.tsx    | 2 +-
 web/core/components/ui/loader/settings/members.tsx        | 2 +-
 web/core/components/ui/loader/view-list-loader.tsx        | 2 +-
 web/core/components/web-hooks/form/secret-key.tsx         | 2 +-
 .../components/workspace-notifications/sidebar/loader.tsx | 2 +-
 30 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/ui/src/dropdown/common/loader.tsx
index 73421b2ae7f..814ed4805b5 100644
--- a/packages/ui/src/dropdown/common/loader.tsx
+++ b/packages/ui/src/dropdown/common/loader.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 export const DropdownOptionsLoader = () => (
   <div className="flex flex-col gap-1 animate-pulse">
-    {range(6).map((_, index) => (
+    {range(6).map((index) => (
       <div key={index} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
     ))}
   </div>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
index 1ef0279107e..7a352ce0fe5 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
@@ -30,7 +30,7 @@ export const ProjectSettingsSidebar = observer(() => {
         <div className="flex flex-col gap-2">
           <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
           <Loader className="flex w-full flex-col gap-2">
-            {range(8).map((_, index) => (
+            {range(8).map((index) => (
               <Loader.Item key={index} height="34px" />
             ))}
           </Loader>
diff --git a/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
index 44ce9326416..099323cce75 100644
--- a/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
+++ b/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
@@ -15,7 +15,7 @@ export const IssuesByStateGroupWidgetLoader = () => (
         </div>
       </div>
       <div className="w-1/2 space-y-7 flex-shrink-0">
-        {range(5).map((_, index) => (
+        {range(5).map((index) => (
           <Loader.Item key={index} height="11px" width="100%" />
         ))}
       </div>
diff --git a/web/core/components/dashboard/widgets/loaders/overview-stats.tsx b/web/core/components/dashboard/widgets/loaders/overview-stats.tsx
index 43cedd348b1..e780bb39966 100644
--- a/web/core/components/dashboard/widgets/loaders/overview-stats.tsx
+++ b/web/core/components/dashboard/widgets/loaders/overview-stats.tsx
@@ -6,7 +6,7 @@ import { Loader } from "@plane/ui";
 
 export const OverviewStatsWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl py-6 grid grid-cols-4 gap-36 px-12">
-    {range(4).map((_, index) => (
+    {range(4).map((index) => (
       <div key={index} className="space-y-3">
         <Loader.Item height="11px" width="50%" />
         <Loader.Item height="15px" />
diff --git a/web/core/components/dashboard/widgets/loaders/recent-activity.tsx b/web/core/components/dashboard/widgets/loaders/recent-activity.tsx
index 9d7d65a0468..2df78a15af1 100644
--- a/web/core/components/dashboard/widgets/loaders/recent-activity.tsx
+++ b/web/core/components/dashboard/widgets/loaders/recent-activity.tsx
@@ -7,7 +7,7 @@ import { Loader } from "@plane/ui";
 export const RecentActivityWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl p-6 space-y-6">
     <Loader.Item height="17px" width="35%" />
-    {range(7).map((_, index) => (
+    {range(7).map((index) => (
       <div key={index} className="flex items-start gap-3.5">
         <div className="flex-shrink-0">
           <Loader.Item height="16px" width="16px" />
diff --git a/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx b/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx
index 9f9217ead49..2dceaf1320a 100644
--- a/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx
+++ b/web/core/components/dashboard/widgets/loaders/recent-collaborators.tsx
@@ -6,7 +6,7 @@ import { Loader } from "@plane/ui";
 
 export const RecentCollaboratorsWidgetLoader = () => (
   <>
-    {range(8).map((_, index) => (
+    {range(8).map((index) => (
       <Loader key={index} className="bg-custom-background-100 rounded-xl px-6 pb-12">
         <div className="space-y-11 flex flex-col items-center">
           <div className="rounded-full overflow-hidden h-[69px] w-[69px]">
diff --git a/web/core/components/dashboard/widgets/loaders/recent-projects.tsx b/web/core/components/dashboard/widgets/loaders/recent-projects.tsx
index 4b51284a33f..38bc7e29a01 100644
--- a/web/core/components/dashboard/widgets/loaders/recent-projects.tsx
+++ b/web/core/components/dashboard/widgets/loaders/recent-projects.tsx
@@ -7,7 +7,7 @@ import { Loader } from "@plane/ui";
 export const RecentProjectsWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl p-6 space-y-6">
     <Loader.Item height="17px" width="35%" />
-    {range(5).map((_, index) => (
+    {range(5).map((index) => (
       <div key={index} className="flex items-center gap-6">
         <div className="flex-shrink-0">
           <Loader.Item height="60px" width="60px" />
diff --git a/web/core/components/issues/workspace-draft/loader.tsx b/web/core/components/issues/workspace-draft/loader.tsx
index fa013a40d79..56efcea985a 100644
--- a/web/core/components/issues/workspace-draft/loader.tsx
+++ b/web/core/components/issues/workspace-draft/loader.tsx
@@ -13,7 +13,7 @@ export const WorkspaceDraftIssuesLoader: FC<TWorkspaceDraftIssuesLoader> = (prop
   const { items = 14 } = props;
   return (
     <div className="relative h-full w-full">
-      {range(items).map((_, index) => (
+      {range(items).map((index) => (
         <ListLoaderItemRow key={index} />
       ))}
     </div>
diff --git a/web/core/components/pages/loaders/page-loader.tsx b/web/core/components/pages/loaders/page-loader.tsx
index 5f8e7e95ffc..974c28f6b8c 100644
--- a/web/core/components/pages/loaders/page-loader.tsx
+++ b/web/core/components/pages/loaders/page-loader.tsx
@@ -18,7 +18,7 @@ export const PageLoader: React.FC = (props) => {
         </Loader>
       </div>
       <div>
-        {range(10).map((_, i) => (
+        {range(10).map((i) => (
           <Loader key={i} className="relative flex items-center gap-2 p-3 py-4 border-b border-custom-border-100">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
             <div className="ml-auto relative flex items-center gap-2">
diff --git a/web/core/components/ui/loader/cycle-module-board-loader.tsx b/web/core/components/ui/loader/cycle-module-board-loader.tsx
index b4f878a63af..62df0e465a5 100644
--- a/web/core/components/ui/loader/cycle-module-board-loader.tsx
+++ b/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -4,7 +4,7 @@ export const CycleModuleBoardLayout = () => (
   <div className="h-full w-full animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
-        {range(5).map((_, i) => (
+        {range(5).map((i) => (
           <div
             key={i}
             className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
diff --git a/web/core/components/ui/loader/cycle-module-list-loader.tsx b/web/core/components/ui/loader/cycle-module-list-loader.tsx
index b6e75671799..33887728eb1 100644
--- a/web/core/components/ui/loader/cycle-module-list-loader.tsx
+++ b/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -4,7 +4,7 @@ export const CycleModuleListLayout = () => (
   <div className="h-full overflow-y-auto animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="flex h-full w-full flex-col overflow-y-auto">
-        {range(5).map((_, i) => (
+        {range(5).map((i) => (
           <div
             key={i}
             className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
diff --git a/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx b/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
index 47b1488cbc2..0edc51c4edf 100644
--- a/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -3,7 +3,7 @@ import { getRandomInt } from "../utils";
 
 const CalendarDay = () => {
   const dataCount = getRandomInt(0, 1);
-  const dataBlocks = range(dataCount).map((_, index) => (
+  const dataBlocks = range(dataCount).map((index) => (
     <span key={index} className="h-8 w-full bg-custom-background-80 rounded mb-2" />
   ));
 
@@ -20,15 +20,15 @@ const CalendarDay = () => {
 export const CalendarLayoutLoader = () => (
   <div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
     <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
-      {range(5).map((_, index) => (
+      {range(5).map((index) => (
         <span key={index} className="h-11 w-full bg-custom-background-80" />
       ))}
     </span>
     <div className="h-full w-full overflow-y-auto">
       <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200 overflow-y-auto">
-        {range(6).map((_, index) => (
+        {range(6).map((index) => (
           <div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
-            {range(5).map((_, index) => (
+            {range(5).map((index) => (
               <CalendarDay key={index} />
             ))}
           </div>
diff --git a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index 9d61a140c98..50a5ac56aee 100644
--- a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -24,7 +24,7 @@ export const GanttLayoutLoader = () => (
           </div>
         </Row>
         <Row className="flex flex-col gap-3 h-11 py-4 w-full">
-          {range(6).map((_, index) => (
+          {range(6).map((index) => (
             <div key={index} className="flex items-center gap-3  h-11 w-full">
               <span className="h-6 w-6 bg-custom-background-80 rounded" />
               <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
@@ -38,13 +38,13 @@ export const GanttLayoutLoader = () => (
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
           </div>
           <div className="flex items-center gap-3 justify-between w-full">
-            {range(15).map((_, index) => (
+            {range(15).map((index) => (
               <span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
             ))}
           </div>
         </div>
         <div className="flex flex-col gap-3 h-11 p-4 w-full">
-          {range(6).map((_, index) => (
+          {range(6).map((index) => (
             <div
               key={index}
               className={`flex items-center gap-3 h-11 w-full`}
diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index af11d763c42..ebf92445e88 100644
--- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -33,7 +33,7 @@ export const KanbanColumnLoader = ({
         </div>
       </div>
     )}
-    {range(cardsInColumn).map((_, cardIndex) => (
+    {range(cardsInColumn).map((cardIndex) => (
       <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
     ))}
   </div>
diff --git a/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index 81ba74ab67c..65d4d1565a2 100644
--- a/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -30,7 +30,7 @@ export const ListLoaderItemRow = forwardRef<
       />
     </div>
     <div className="flex items-center gap-2">
-      {range(defaultPropertyCount).map((_, index) => (
+      {range(defaultPropertyCount).map((index) => (
         <Fragment key={index}>
           {getRandomInt(1, 2) % 2 === 0 ? (
             <span
@@ -65,7 +65,7 @@ const ListSection = ({ itemCount }: { itemCount: number }) => (
       </div>
     </Row>
     <div className="relative h-full w-full">
-      {range(itemCount).map((_, index) => (
+      {range(itemCount).map((index) => (
         <ListLoaderItemRow key={index} />
       ))}
     </div>
diff --git a/web/core/components/ui/loader/layouts/members-layout-loader.tsx b/web/core/components/ui/loader/layouts/members-layout-loader.tsx
index 2a7ac4ccd34..6010d17bf6d 100644
--- a/web/core/components/ui/loader/layouts/members-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/members-layout-loader.tsx
@@ -1,12 +1,12 @@
 import range from "lodash/range";
 export const MembersLayoutLoader = () => (
   <div className="flex gap-5 py-1.5 overflow-x-auto">
-    {range(5).map((_, columnIndex) => (
+    {range(5).map((columnIndex) => (
       <div key={columnIndex} className="flex flex-col gap-3">
         <div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
           <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
         </div>
-        {range(2).map((_, cardIndex) => (
+        {range(2).map((cardIndex) => (
           <span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
         ))}
       </div>
diff --git a/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
index 38d36295d75..0ead51f58e5 100644
--- a/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -3,7 +3,7 @@ import range from "lodash/range";
 
 export const InboxSidebarLoader = () => (
   <div className="flex flex-col">
-    {range(6).map((_, index) => (
+    {range(6).map((index) => (
       <div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
         <div className="flex flex-col gap-2">
           <span className="h-5 w-16 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index 2bbc040408e..c1b00d0ad37 100644
--- a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -12,7 +12,7 @@ export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
         />
       </Row>
     </td>
-    {range(props.columnCount).map((_, colIndex) => (
+    {range(props.columnCount).map((colIndex) => (
       <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
         <div className="flex items-center justify-center gap-3 px-3">
           <span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
@@ -28,7 +28,7 @@ export const SpreadsheetLayoutLoader = () => (
       <thead>
         <tr>
           <th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
-          {range(10).map((_, index) => (
+          {range(10).map((index) => (
             <th
               key={index}
               className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
@@ -37,7 +37,7 @@ export const SpreadsheetLayoutLoader = () => (
         </tr>
       </thead>
       <tbody>
-        {range(16).map((_, rowIndex) => (
+        {range(16).map((rowIndex) => (
           <SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
         ))}
       </tbody>
diff --git a/web/core/components/ui/loader/notification-loader.tsx b/web/core/components/ui/loader/notification-loader.tsx
index db91cccf335..4526e400ddd 100644
--- a/web/core/components/ui/loader/notification-loader.tsx
+++ b/web/core/components/ui/loader/notification-loader.tsx
@@ -2,7 +2,7 @@ import range from "lodash/range";
 
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {range(3).map((_, i) => (
+    {range(3).map((i) => (
       <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">
diff --git a/web/core/components/ui/loader/pages-loader.tsx b/web/core/components/ui/loader/pages-loader.tsx
index d3ba95bd0ec..296c8727538 100644
--- a/web/core/components/ui/loader/pages-loader.tsx
+++ b/web/core/components/ui/loader/pages-loader.tsx
@@ -6,12 +6,12 @@ export const PagesLoader = () => (
       <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
     </div>
     <div className="flex items-center gap-3">
-      {range(5).map((_, i) => (
+      {range(5).map((i) => (
         <span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
       ))}
     </div>
     <div className="divide-y divide-custom-border-200">
-      {range(5).map((_, i) => (
+      {range(5).map((i) => (
         <div key={i} className="h-12 w-full flex items-center justify-between px-3">
           <div className="flex items-center gap-1.5">
             <span className="h-5 w-5 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/projects-loader.tsx b/web/core/components/ui/loader/projects-loader.tsx
index 996f9d08ec6..263919cd182 100644
--- a/web/core/components/ui/loader/projects-loader.tsx
+++ b/web/core/components/ui/loader/projects-loader.tsx
@@ -3,7 +3,7 @@ import range from "lodash/range";
 export const ProjectsLoader = () => (
   <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
     <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-      {range(3).map((_, i) => (
+      {range(3).map((i) => (
         <div
           key={i}
           className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
diff --git a/web/core/components/ui/loader/settings/activity.tsx b/web/core/components/ui/loader/settings/activity.tsx
index 258da7111a8..a9860f6c0e5 100644
--- a/web/core/components/ui/loader/settings/activity.tsx
+++ b/web/core/components/ui/loader/settings/activity.tsx
@@ -3,7 +3,7 @@ import { getRandomLength } from "../utils";
 
 export const ActivitySettingsLoader = () => (
   <div className="flex flex-col gap-3 animate-pulse">
-    {range(10).map((_, i) => (
+    {range(10).map((i) => (
       <div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
         <span className="h-6 w-6 bg-custom-background-80 rounded" />
         <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
diff --git a/web/core/components/ui/loader/settings/api-token.tsx b/web/core/components/ui/loader/settings/api-token.tsx
index f15e92b440d..ca8f59cda5b 100644
--- a/web/core/components/ui/loader/settings/api-token.tsx
+++ b/web/core/components/ui/loader/settings/api-token.tsx
@@ -7,7 +7,7 @@ export const APITokenSettingsLoader = () => (
       <span className="h-8 w-28 bg-custom-background-80 rounded" />
     </div>
     <div className="divide-y-[0.5px] divide-custom-border-200">
-      {range(2).map((_, i) => (
+      {range(2).map((i) => (
         <div key={i} className="flex flex-col gap-2 px-4 py-3">
           <div className="flex items-center gap-2">
             <span className="h-5 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/email.tsx b/web/core/components/ui/loader/settings/email.tsx
index 902309fec7e..964a68b0865 100644
--- a/web/core/components/ui/loader/settings/email.tsx
+++ b/web/core/components/ui/loader/settings/email.tsx
@@ -10,7 +10,7 @@ export const EmailSettingsLoader = () => (
       <div className="flex items-center py-3">
         <span className="h-7 w-32 bg-custom-background-80 rounded" />
       </div>
-      {range(4).map((_, i) => (
+      {range(4).map((i) => (
         <div key={i} className="flex items-center justify-between">
           <div className="flex flex-col gap-2 py-3">
             <span className="h-6 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/import-and-export.tsx b/web/core/components/ui/loader/settings/import-and-export.tsx
index d7211b6fb9c..eea44c49320 100644
--- a/web/core/components/ui/loader/settings/import-and-export.tsx
+++ b/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -2,7 +2,7 @@ import range from "lodash/range";
 
 export const ImportExportSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
-    {range(2).map((_, i) => (
+    {range(2).map((i) => (
       <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
         <div className="flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
diff --git a/web/core/components/ui/loader/settings/integration.tsx b/web/core/components/ui/loader/settings/integration.tsx
index 279437031a9..ed425376027 100644
--- a/web/core/components/ui/loader/settings/integration.tsx
+++ b/web/core/components/ui/loader/settings/integration.tsx
@@ -2,7 +2,7 @@ import range from "lodash/range";
 
 export const IntegrationsSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {range(2).map((_, i) => (
+    {range(2).map((i) => (
       <div
         key={i}
         className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
diff --git a/web/core/components/ui/loader/settings/members.tsx b/web/core/components/ui/loader/settings/members.tsx
index 58d2db2fdf1..1a412f76120 100644
--- a/web/core/components/ui/loader/settings/members.tsx
+++ b/web/core/components/ui/loader/settings/members.tsx
@@ -2,7 +2,7 @@ import range from "lodash/range";
 
 export const MembersSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {range(4).map((_, i) => (
+    {range(4).map((i) => (
       <div key={i} className="group flex items-center justify-between px-3 py-4">
         <div className="flex items-center gap-x-4 gap-y-2">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
diff --git a/web/core/components/ui/loader/view-list-loader.tsx b/web/core/components/ui/loader/view-list-loader.tsx
index 7e8dd61bd6a..71432a5433f 100644
--- a/web/core/components/ui/loader/view-list-loader.tsx
+++ b/web/core/components/ui/loader/view-list-loader.tsx
@@ -2,7 +2,7 @@ import range from "lodash/range";
 
 export const ViewListLoader = () => (
   <div className="flex h-full w-full flex-col animate-pulse">
-    {range(8).map((_, i) => (
+    {range(8).map((i) => (
       <div key={i} className="group border-b border-custom-border-200">
         <div className="relative flex w-full items-center justify-between rounded p-4">
           <div className="flex items-center gap-4">
diff --git a/web/core/components/web-hooks/form/secret-key.tsx b/web/core/components/web-hooks/form/secret-key.tsx
index 9b49f4ac6fc..62815a6e288 100644
--- a/web/core/components/web-hooks/form/secret-key.tsx
+++ b/web/core/components/web-hooks/form/secret-key.tsx
@@ -103,7 +103,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
                   <p className="text-xs">{webhookSecretKey}</p>
                 ) : (
                   <div className="flex items-center gap-1.5 overflow-hidden mr-2">
-                    {range(30).map((_, index) => (
+                    {range(30).map((index) => (
                       <div key={index} className="h-1 w-1 rounded-full bg-custom-text-400 flex-shrink-0" />
                     ))}
                   </div>
diff --git a/web/core/components/workspace-notifications/sidebar/loader.tsx b/web/core/components/workspace-notifications/sidebar/loader.tsx
index c8a0e5ce75e..6feca28ccba 100644
--- a/web/core/components/workspace-notifications/sidebar/loader.tsx
+++ b/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -2,7 +2,7 @@ import range from "lodash/range";
 
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {range(8).map((_, i) => (
+    {range(8).map((i) => (
       <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">