improve skeleton loaders

frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx

@@ -1,5 +1,7 @@
 import { Tooltip } from '@czi-sds/components'
 import Paper from '@mui/material/Paper'
+import Skeleton from '@mui/material/Skeleton'
+import { range } from 'lodash-es'
 import { ReactNode } from 'react'
 
 import { ANNOTATED_OBJECTS_MAX } from 'app/constants/pagination'
@@ -22,14 +24,20 @@ function List({
 
 export function AnnotatedObjectsList({
   annotatedObjects,
+  isLoading,
 }: {
   annotatedObjects: string[]
+  isLoading?: boolean
 }) {
   if (annotatedObjects.length === 0) {
     return null
   }
 
-  const nodes = annotatedObjects.map((obj) => <li key={obj}>{obj}</li>)
+  const nodes = isLoading
+    ? range(0, ANNOTATED_OBJECTS_MAX).map((val) => (
+        <Skeleton key={`skeleton-${val}`} variant="rounded" />
+      ))
+    : annotatedObjects.map((obj) => <li key={obj}>{obj}</li>)
 
   return (
     <List>

frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx

@@ -82,14 +82,15 @@ export function DatasetTable() {
           return (
             <TableCell
               className="flex px-sds-s py-sds-l gap-sds-m"
-              loadingSkeleton={false}
+              renderLoadingSkeleton={false}
               minWidth={450}
               maxWidth={800}
             >
               <KeyPhoto
                 title={dataset.title}
                 // TODO use dataset keyphoto
                 src="https://cataas.com/cat"
+                loading={isLoadingDebounced}
               />
 
               <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">

frontend/packages/data-portal/app/components/Dataset/AccordionMetadataTable.tsx

@@ -16,7 +16,7 @@ export function AccordionMetadataTable({
       <MetadataTable
         data={data}
         tableCellProps={{
-          loadingSkeleton: false,
+          renderLoadingSkeleton: false,
         }}
       />
     </Accordion>

frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx

@@ -9,7 +9,7 @@ import { GetDatasetByIdQuery } from 'app/__generated__/graphql'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
 import { Table, TableCell } from 'app/components/Table'
-import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
+import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { TiltSeriesScore } from 'app/constants/tiltSeries'
 import { useDatasetById } from 'app/hooks/useDatasetById'
 import { useIsLoading } from 'app/hooks/useIsLoading'
@@ -34,30 +34,34 @@ export function RunsTable() {
     return [
       columnHelper.accessor('name', {
         header: i18n.run,
-        cell({ row: { original: run } }) {
-          return (
-            <TableCell
-              className="flex flex-auto gap-4"
-              minWidth={250}
-              maxWidth={300}
-            >
-              <KeyPhoto
-                title={run.name}
-                // TODO use dataset keyphoto
-                src="https://cataas.com/cat"
-              />
+        cell: ({ row: { original: run } }) => (
+          <TableCell
+            className="flex flex-auto gap-4"
+            minWidth={250}
+            maxWidth={300}
+            renderLoadingSkeleton={false}
+          >
+            <KeyPhoto
+              title={run.name}
+              // TODO use dataset keyphoto
+              src="https://cataas.com/cat"
+              loading={isLoadingDebounced}
+            />
 
-              <div className="flex flex-col flex-auto min-h-[100px]">
+            <div className="flex flex-col flex-auto min-h-[100px]">
+              {isLoadingDebounced ? (
+                <Skeleton className="max-w-[150px]" variant="text" />
+              ) : (
                 <Link
                   className="text-sds-primary-500 font-semibold"
                   to={`/runs/${run.id}`}
                 >
                   {run.name}
                 </Link>
-              </div>
-            </TableCell>
-          )
-        },
+              )}
+            </div>
+          </TableCell>
+        ),
       }),
 
       columnHelper.accessor(
@@ -91,25 +95,22 @@ export function RunsTable() {
             <TableCell
               minWidth={120}
               maxWidth={400}
-              renderLoadingSkeleton={() => (
-                <div className="flex flex-col gap-2">
-                  {range(0, ANNOTATED_OBJECTS_MAX).map((val) => (
-                    <Skeleton key={`skeleton-${val}`} variant="rounded" />
-                  ))}
-                </div>
-              )}
+              renderLoadingSkeleton={false}
             >
               {annotatedObjects.length === 0 ? (
                 '--'
               ) : (
-                <AnnotatedObjectsList annotatedObjects={annotatedObjects} />
+                <AnnotatedObjectsList
+                  annotatedObjects={annotatedObjects}
+                  isLoading={isLoadingDebounced}
+                />
               )}
             </TableCell>
           )
         },
       }),
     ] as ColumnDef<Run>[]
-  }, [])
+  }, [isLoadingDebounced])
 
   return (
     <Table

frontend/packages/data-portal/app/components/KeyPhoto.tsx

@@ -1,33 +1,36 @@
 import Skeleton from '@mui/material/Skeleton'
+import { match, P } from 'ts-pattern'
 
-import { useIsLoading } from 'app/hooks/useIsLoading'
 import { i18n } from 'app/i18n'
 import { cns } from 'app/utils/cns'
 
-export function KeyPhoto({ src, title }: { src?: string; title: string }) {
-  const { isLoadingDebounced } = useIsLoading()
-  const containerClassName =
-    '!min-w-[134px] !max-w-[134px] !min-h-[100px] !max-h-[100px]'
-
-  if (isLoadingDebounced) {
-    return <Skeleton className={containerClassName} variant="rounded" />
-  }
-
+export function KeyPhoto({
+  loading,
+  src,
+  title,
+}: {
+  loading?: boolean
+  src?: string
+  title: string
+}) {
   return (
     <div
       className={cns(
-        containerClassName,
+        '!min-w-[134px] !max-w-[134px] !min-h-[100px] !max-h-[100px]',
         'flex items-center justify-center bg-[#d9d9d9]',
 
         // crop image to container dimensions
         'overflow-hidden object-cover',
       )}
     >
-      {src ? (
-        <img alt={`key visualization for ${title}`} src={src} />
-      ) : (
-        <p className="text-sds-gray-400 text-sm">{i18n.keyPhoto}</p>
-      )}
+      {match([src, loading])
+        .with([P._, true], () => <Skeleton variant="rounded" />)
+        .with([P.string, false], () => (
+          <img alt={`key visualization for ${title}`} src={src} />
+        ))
+        .otherwise(() => (
+          <p className="text-sds-gray-400 text-sm">{i18n.keyPhoto}</p>
+        ))}
     </div>
   )
 }

frontend/packages/data-portal/app/components/Table/TableCell.tsx

@@ -7,7 +7,6 @@ import { useIsLoading } from 'app/hooks/useIsLoading'
 export function TableCell({
   children,
   className,
-  loadingSkeleton = true,
   maxWidth,
   minWidth,
   primaryText,
@@ -19,7 +18,7 @@ export function TableCell({
   maxWidth?: number
   minWidth?: number
   primaryText?: string
-  renderLoadingSkeleton?(): ReactNode
+  renderLoadingSkeleton?: (() => ReactNode) | false
 }) {
   const { isLoadingDebounced } = useIsLoading()
   const cellProps = {
@@ -30,7 +29,7 @@ export function TableCell({
     },
   }
 
-  if (loadingSkeleton && isLoadingDebounced) {
+  if (renderLoadingSkeleton && isLoadingDebounced) {
     return (
       <CellComponent {...cellProps}>{renderLoadingSkeleton()}</CellComponent>
     )
@@ -42,7 +41,7 @@ export function TableCell({
 
   return (
     <CellComponent {...cellProps}>
-      {loadingSkeleton && isLoadingDebounced
+      {renderLoadingSkeleton && isLoadingDebounced
         ? renderLoadingSkeleton()
         : children}
     </CellComponent>