[WEB-2762] chore: loader code refactor

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>
 );

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>

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>

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" />

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" />

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]">

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" />

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>

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">

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"

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"

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>

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`}

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>

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>

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>

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((i, 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" />

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>

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">

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" />

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"

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`} />

web/core/components/ui/loader/settings/api-token.tsx

@@ -1,11 +1,13 @@
+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">
       <h3 className="text-xl font-medium">API tokens</h3>
       <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" />