Clearer list page loading states (#9547)

Author: emmatown

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx

@@ -25,6 +25,7 @@ import { toastQueue } from '@keystar/ui/toast'
 import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
 import { Heading, Text } from '@keystar/ui/typography'
 
+import type { TypedDocumentNode } from '../../../../admin-ui/apollo'
 import { gql, useMutation, useQuery } from '../../../../admin-ui/apollo'
 import { PageContainer } from '../../../../admin-ui/components/PageContainer'
 import { useList } from '../../../../admin-ui/context'
@@ -39,6 +40,7 @@ import { useFilters } from './useFilters'
 import { useSearchFilter } from '../../../../fields/types/relationship/views/useFilter'
 import { useSelectedFields } from './useSelectedFields'
 import { useSort } from './useSort'
+import { ProgressCircle } from '@keystar/ui/progress'
 
 type ListPageProps = { listKey: string }
 type SelectedKeys = 'all' | Set<number | string>
@@ -103,8 +105,11 @@ function ListPage({ listKey }: ListPageProps) {
   const search = useSearchFilter(searchParam, list, list.initialSearchFields)
 
   const selectedFields = useSelectedFields(list)
-  const { data, error, refetch } = useQuery(
-    useMemo(() => {
+  const { data, error, refetch, loading } = useQuery(
+    useMemo((): TypedDocumentNode<{
+      items: Record<string, unknown>[] | null
+      count: number | null
+    }> => {
       const selectedGqlFields = [...selectedFields]
         .map(fieldPath => list.fields[fieldPath].controller.graphqlSelection)
         .join('\n')
@@ -156,6 +161,11 @@ function ListPage({ listKey }: ListPageProps) {
     }
   }
 
+  const [dataWithPevious, setDataWithPrevious] = useState<typeof data>(data)
+  if (!loading && data !== dataWithPevious) {
+    setDataWithPrevious(data)
+  }
+
   const allowCreate = !(list.hideCreate ?? true)
   const allowDelete = !(list.hideDelete ?? true)
   const isConstrained = Boolean(filters.filters.length || query.search)
@@ -194,6 +204,7 @@ function ListPage({ listKey }: ListPageProps) {
               <Tooltip>Reset to defaults</Tooltip>
             </TooltipTrigger>
           )}
+          {!!dataWithPevious && loading && <ProgressCircle size="small" isIndeterminate />}
         </HStack>
 
         {filters.filters.length ? <FilterList filters={filters.filters} list={list} /> : null}
@@ -203,13 +214,13 @@ function ListPage({ listKey }: ListPageProps) {
         <ListTable
           listKey={listKey}
           allowDelete={allowDelete}
-          count={data?.count ?? 0}
+          data={dataWithPevious}
           currentPage={currentPage}
           isConstrained={isConstrained}
           pageSize={pageSize}
           refetch={refetch}
-          items={data?.items ?? []}
           selectedFields={selectedFields}
+          loading={loading}
         />
       </VStack>
     </PageContainer>
@@ -236,24 +247,24 @@ function ListPageHeader({ listKey, showCreate }: { listKey: string; showCreate?:
 
 function ListTable({
   allowDelete,
-  count,
+  data,
   currentPage,
   isConstrained,
   listKey,
-  items,
   pageSize,
   refetch,
   selectedFields,
+  loading,
 }: {
   allowDelete: boolean
-  count: number
   currentPage: number
   isConstrained: boolean
   listKey: string
   pageSize: number
   refetch: () => void
   selectedFields: ReturnType<typeof useSelectedFields>
-  items: Record<string, unknown>[]
+  data: { items: Record<string, unknown>[] | null; count: number | null } | undefined
+  loading: boolean
 }) {
   const list = useList(listKey)
   const router = useRouter()
@@ -271,7 +282,7 @@ function ListTable({
     return {
       id: path,
       label: field.label,
-      allowsSorting: !isConstrained && !items.length ? false : field.isOrderable,
+      allowsSorting: !isConstrained && !data?.items?.length ? false : field.isOrderable,
     }
   })
 
@@ -288,7 +299,9 @@ function ListTable({
           onSelectionChange={setSelectedKeys}
           selectedKeys={selectedKeys}
           renderEmptyState={() =>
-            isConstrained ? (
+            loading ? (
+              <ProgressCircle isIndeterminate />
+            ) : isConstrained ? (
               <EmptyState
                 icon={searchXIcon}
                 title="No results"
@@ -303,6 +316,9 @@ function ListTable({
             )
           }
           flex
+          UNSAFE_style={{
+            opacity: loading && !!data ? 0.5 : undefined,
+          }}
         >
           <TableHeader columns={columns}>
             {({ label, id, ...options }) => (
@@ -311,7 +327,7 @@ function ListTable({
               </Column>
             )}
           </TableHeader>
-          <TableBody items={items}>
+          <TableBody items={data?.items ?? []}>
             {row => {
               return (
                 <Row href={`/${list.path}/${row?.id}`}>
@@ -352,7 +368,7 @@ function ListTable({
             switch (key) {
               case 'delete':
                 if (selectedKeys === 'all') {
-                  const ids = items.filter(x => x.id != null).map(x => `${x.id}`)
+                  const ids = data?.items?.filter(x => x.id != null).map(x => `${x.id}`)
                   setIdsForDeletion(new Set(ids))
                 } else {
                   setIdsForDeletion(selectedKeys)
@@ -370,13 +386,13 @@ function ListTable({
         </ActionBar>
       </ActionBarContainer>
 
-      {count > 0 && (
+      {!!data?.count && (
         <Pagination
           currentPage={currentPage}
           pageSize={pageSize}
           plural={list.plural}
           singular={list.singular}
-          total={count}
+          total={data.count}
         />
       )}
 

tests/admin-ui-tests/filters.test.ts

@@ -8,19 +8,18 @@ adminUITests('./tests/test-projects/basic', browserType => {
 
   beforeAll(async () => {
     browser = await browserType.launch()
-    context = await browser.newContext()
-    page = await browser.newPage()
-    await loadIndex(page)
   })
 
   describe('relationship filters', () => {
     beforeEach(async () => {
-      await context.clearCookies()
-      await page.evaluate(() => {
-        window.localStorage.clear()
-      })
+      context = await browser.newContext()
+      page = await context.newPage()
+      await loadIndex(page)
       await deleteAllData('./tests/test-projects/basic')
     })
+    afterEach(async () => {
+      await context.close()
+    })
     test('Lists are filterable by relationships', async () => {
       const gql = String.raw
       const TASK_MUTATION_CREATE = gql`