[WEB-2762] chore: loader code refactor (#5992)

* chore: loader code refactor * chore: code refactor * chore: code refactor * chore: code refactor
2025-08-07 19:59:33 +00:00 · 2024-12-02 13:24:01 +05:30
parent 1b9033993d
commit 1953d6fe3a
30 changed files with 84 additions and 42 deletions
--- 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>
 );
--- 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>
--- 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>
--- 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" />
--- 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" />
--- 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]">
--- 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" />
--- 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>
--- 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">
--- 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"
--- 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"
--- 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>
--- 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`}
--- 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>
--- 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>
--- 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>
--- 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((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" />
--- 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>
--- 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">
--- 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" />
--- 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"
--- 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`} />
--- 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" />
--- 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" />
--- 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">
--- 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"
--- 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" />
--- 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">
--- 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>
--- 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">