[WEB-5884] chore: layout loader enhancements #8500

apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -44,7 +44,9 @@ const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
   props: Record<string, unknown>,
   ref: React.ForwardedRef<HTMLSpanElement>
 ) {
-  return <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-layer-1 rounded-sm" />;
+  return (
+    <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-[var(--illustration-fill-quaternary)] rounded-sm" />
+  );
 });
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
@@ -119,7 +121,17 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
         scrollableContainerRef={scrollableContainerRef}
       />
 
-      {shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
+      {shouldLoadMore &&
+        (isSubGroup ? (
+          <>{loadMore}</>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {Array.from({ length: 2 }).map((_, index) => (
+              <KanbanIssueBlockLoader key={index} />
+            ))}
+            <KanbanIssueBlockLoader ref={setIntersectionElement} />
+          </div>
+        ))}
     </div>
   );
 });

apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -311,7 +311,17 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
         isEpic={isEpic}
       />
 
-      {shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
+      {shouldLoadMore &&
+        (isSubGroup ? (
+          <>{loadMore}</>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {Array.from({ length: 2 }).map((_, index) => (
+              <KanbanIssueBlockLoader key={index} />
+            ))}
+            <KanbanIssueBlockLoader ref={setIntersectionElement} />
+          </div>
+        ))}
 
       {enableQuickIssueCreate &&
         !disableIssueCreation &&

apps/web/core/components/issues/issue-layouts/list/list-group.tsx

@@ -312,7 +312,17 @@ export const ListGroup = observer(function ListGroup(props: Props) {
             />
           )}
 
-          {shouldLoadMore && (group_by ? <>{loadMore}</> : <ListLoaderItemRow ref={setIntersectionElement} />)}
+          {shouldLoadMore &&
+            (group_by ? (
+              <>{loadMore}</>
+            ) : (
+              <>
+                {Array.from({ length: 2 }).map((_, index) => (
+                  <ListLoaderItemRow key={index} />
+                ))}
+                <ListLoaderItemRow ref={setIntersectionElement} />
+              </>
+            ))}
 
           {enableIssueQuickAdd &&
             !disableIssueCreation &&

apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx

@@ -144,7 +144,9 @@ export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props)
       </tbody>
       {canLoadMoreIssues && (
         <tfoot ref={setIntersectionElement}>
-          <SpreadsheetIssueRowLoader columnCount={displayPropertiesCount} />
+          {Array.from({ length: 3 }).map((_, index) => (
+            <SpreadsheetIssueRowLoader key={index} columnCount={displayPropertiesCount} />
+          ))}
         </tfoot>
       )}
     </table>

apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx

@@ -18,7 +18,7 @@ export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader
   return (
     <span
       ref={ref}
-      className={cn(`block bg-layer-1 rounded-sm`, { " animate-pulse": shouldAnimate })}
+      className={cn(`block bg-[var(--illustration-fill-secondary)] rounded-sm`, { " animate-pulse": shouldAnimate })}
       style={{ height: `${cardHeight}px` }}
     />
   );

apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx

@@ -23,23 +23,26 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
   return (
     <Row
       ref={ref}
-      className={cn("flex items-center justify-between h-11 py-3 ", {
+      className={cn("flex items-center justify-between h-11 py-3", {
         "bg-surface-1": renderForPlaceHolder,
-        "border-b border-subtle": !renderForPlaceHolder,
+        "border-t border-subtle": !renderForPlaceHolder,
       })}
     >
       <div className="flex items-center gap-3">
         <span
-          className={cn("h-5 w-10 bg-layer-1 rounded-sm", {
+          className={cn("h-5 w-10 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
             "animate-pulse": shouldAnimate,
             "bg-surface-2": renderForPlaceHolder,
           })}
         />
         <span
-          className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`, {
+          className={cn(
-            "animate-pulse": shouldAnimate,
+            `h-5 w-${getRandomLength(["32", "52", "72"])} bg-[var(--illustration-fill-tertiary)] rounded-sm`,
-            "bg-surface-2": renderForPlaceHolder,
+            {
-          })}
+              "animate-pulse": shouldAnimate,
+              "bg-surface-2": renderForPlaceHolder,
+            }
+          )}
         />
       </div>
       <div className="flex items-center gap-2">
@@ -48,14 +51,14 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
             {getRandomInt(1, 2) % 2 === 0 ? (
               <span
                 key={index}
-                className={cn("h-5 w-5 bg-layer-1 rounded-sm", {
+                className={cn("h-5 w-5 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
                   "animate-pulse": shouldAnimate,
                   "bg-surface-2": renderForPlaceHolder,
                 })}
               />
             ) : (
               <span
-                className={cn("h-5 w-16 bg-layer-1 rounded-sm", {
+                className={cn("h-5 w-16 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
                   "animate-pulse": shouldAnimate,
                   "bg-surface-2": renderForPlaceHolder,
                 })}