[v14] [Web] Unified Resources: Add skeleton loader to list view

web/packages/design/src/ShimmerBox/ShimmerBox.tsx

@@ -31,7 +31,7 @@ const loading = keyframes`
 const ShimmerWrapper = styled.div`
   width: 100%;
   height: 100%;
-  background-color: ${props => props.theme.colors.levels.surface};
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: ${props => props.theme.radii[2]}px;
   overflow: hidden;
   position: relative;
@@ -43,7 +43,7 @@ const Shimmer = styled.div`
   background: linear-gradient(
     90deg,
     transparent 25%,
-    ${props => props.theme.colors.levels.elevated} 50%,
+    ${props => props.theme.colors.spotBackground[0]} 50%,
     transparent 75%
   );
   background-size: 200% 100%;

web/packages/shared/components/UnifiedResources/CardsView/CardsView.tsx

@@ -23,8 +23,9 @@ import { FETCH_MORE_SIZE } from '../UnifiedResources';
 
 import { ResourceViewProps } from '../types';
 
-import { LoadingSkeleton } from '../LoadingSkeleton';
-import { LoadingCard } from '../LoadingCard';
+import { LoadingSkeleton } from '../shared/LoadingSkeleton';
+
+import { LoadingCard } from './LoadingCard';
 
 import { ResourceCard } from './ResourceCard';
 
@@ -57,7 +58,6 @@ export function CardsView({
           pinResource={() => onPinResource(key)}
         />
       ))}
-      {/* Using index as key here is ok because these elements never change order */}
       {isProcessing && (
         <LoadingSkeleton count={FETCH_MORE_SIZE} Element={<LoadingCard />} />
       )}

web/packages/shared/components/UnifiedResources/ListView/ListView.tsx

@@ -16,11 +16,15 @@
 
 import React from 'react';
 
-import { Flex, Box, Indicator } from 'design';
+import { Flex } from 'design';
 
 import { ResourceViewProps } from '../types';
+import { FETCH_MORE_SIZE } from '../UnifiedResources';
+
+import { LoadingSkeleton } from '../shared/LoadingSkeleton';
 
 import { ResourceListItem } from './ResourceListItem';
+import { LoadingListItem } from './LoadingListItem';
 
 export function ListView({
   mappedResources,
@@ -51,11 +55,11 @@ export function ListView({
           pinResource={() => onPinResource(key)}
         />
       ))}
-      {/* TODO (rudream): Add skeleton loader */}
       {isProcessing && (
-        <Box textAlign="center" m={10}>
-          <Indicator />
-        </Box>
+        <LoadingSkeleton
+          count={FETCH_MORE_SIZE}
+          Element={<LoadingListItem />}
+        />
       )}
     </Flex>
   );

web/packages/shared/components/UnifiedResources/ListView/LoadingListItem.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Box, Flex } from 'design';
+import { ShimmerBox } from 'design/ShimmerBox';
+
+export function LoadingListItem() {
+  return (
+    <LoadingListItemWrapper>
+      {/* Image */}
+      <ShimmerBox
+        height="32px"
+        width="32px"
+        css={`
+          grid-area: image;
+        `}
+      />
+      {/* Name and description */}
+      <Flex
+        flexDirection="column"
+        gap={1}
+        css={`
+          grid-area: name;
+        `}
+      >
+        <ShimmerBox height="14px" width={`${randomNum(95, 40)}%`} />
+        <ShimmerBox height="10px" width={`${randomNum(65, 25)}%`} />
+      </Flex>
+      <ShimmerBox
+        css={`
+          grid-area: type;
+        `}
+        height="18px"
+        width={`${randomNum(80, 60)}%`}
+      />
+
+      <ShimmerBox
+        css={`
+          grid-area: address;
+        `}
+        height="18px"
+        width={`${randomNum(90, 50)}%`}
+      />
+
+      <ShimmerBox
+        css={`
+          grid-area: button;
+        `}
+        height="24px"
+        width="90px"
+      />
+    </LoadingListItemWrapper>
+  );
+}
+
+function randomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const LoadingListItemWrapper = styled(Box)`
+  height: 58px;
+  min-width: 100%;
+
+  display: grid;
+  align-items: center;
+  column-gap: ${props => props.theme.space[3]}px;
+  grid-template-columns: 36px 2fr 1fr 1fr 90px;
+  grid-template-areas: 'image name type address button';
+  padding-right: ${props => props.theme.space[3]}px;
+  padding-left: ${props => props.theme.space[3]}px;
+`;