feat(app): add Skeleton component for second window (#20298)

* feat(app): add Skeleton component for second window

Author: koji

app/src/pages/Desktop/StepDetailViewer/SkeletonForSlotDetail.tsx

@@ -0,0 +1,29 @@
+import { BORDERS } from '@opentrons/components'
+
+import { Skeleton } from '/app/atoms/Skeleton'
+
+import styles from './skeletonforslotdetail.module.css'
+
+// backgroundSize 23px + 360px from the default design size
+export function SkeletonForSlotDetail(): JSX.Element {
+  return (
+    <div className={styles.slot_loading_container}>
+      <div className={styles.slot_loading_header}>
+        <Skeleton
+          width="23px"
+          height="20px"
+          borderRadius={BORDERS.borderRadius4}
+          backgroundSize="24rem"
+        />
+      </div>
+      <div className={styles.slot_loading_body}>
+        <Skeleton
+          width="100%"
+          height="100%"
+          backgroundSize="24rem"
+          borderRadius={BORDERS.borderRadius4}
+        />
+      </div>
+    </div>
+  )
+}

app/src/pages/Desktop/StepDetailViewer/__tests__/SkeletonForSlotDetail.test.tsx

@@ -0,0 +1,23 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '/app/__testing-utils__'
+import { Skeleton } from '/app/atoms/Skeleton'
+
+import { SkeletonForSlotDetail } from '../SkeletonForSlotDetail'
+
+vi.mock('/app/atoms/Skeleton')
+
+const render = () => {
+  return renderWithProviders(<SkeletonForSlotDetail />)
+}
+
+describe('SkeletonForSlotDetail', () => {
+  beforeEach(() => {
+    vi.mocked(Skeleton).mockReturnValue(<div>mock Skeleton</div>)
+  })
+  it('should render two Skeleton components', () => {
+    render()
+    expect(screen.getAllByText('mock Skeleton')).toHaveLength(2)
+  })
+})

app/src/pages/Desktop/StepDetailViewer/index.tsx

@@ -3,6 +3,8 @@ import { useParams } from 'react-router-dom'
 
 import { SlotDetails } from '/app/organisms/Desktop/ProtocolVisualization/SlotDetails'
 
+import { SkeletonForSlotDetail } from './SkeletonForSlotDetail'
+
 import type {
   Liquid,
   ProtocolAnalysisOutput,
@@ -74,7 +76,7 @@ export function StepDetailViewer(): JSX.Element {
   }, [protocolKey])
 
   if (loading) {
-    return <div>loading</div>
+    return <SkeletonForSlotDetail />
   }
   if (!data) {
     return <div>no data found</div>

app/src/pages/Desktop/StepDetailViewer/skeletonforslotdetail.module.css

@@ -0,0 +1,24 @@
+.slot_loading_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: var(--spacing-16) var(--spacing-20);
+  gap: var(--spacing-16);
+}
+
+.slot_loading_header {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.slot_loading_body {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-4);
+  background-color: var(--grey-10);
+}