Show loading spinner while loading views in List Table

keystonejs · May 3, 2019 · 13b7d4e · 13b7d4e
1 parent 061aedf
commit 13b7d4e
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 91 deletions.
diff --git a/.changeset/f4c4c52c/changes.json b/.changeset/f4c4c52c/changes.json
@@ -0,0 +1 @@
+{ "releases": [{ "name": "@keystone-alpha/admin-ui", "type": "patch" }], "dependents": [] }
diff --git a/.changeset/f4c4c52c/changes.md b/.changeset/f4c4c52c/changes.md
@@ -0,0 +1 @@
+- Show loading spinner while loading views in List Table
diff --git a/packages/admin-ui/client/components/ListTable.js b/packages/admin-ui/client/components/ListTable.js
@@ -1,9 +1,10 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
+import { captureSuspensePromises } from '@keystone-alpha/utils';
 import { DiffIcon, KebabHorizontalIcon, LinkIcon, ShieldIcon, TrashcanIcon } from '@arch-ui/icons';
 import { colors, gridSize } from '@arch-ui/theme';
 import { alpha } from '@arch-ui/color-utils';
@@ -15,6 +16,10 @@ import { Card } from '@arch-ui/card';
 import DeleteItemModal from './DeleteItemModal';
 import { copyToClipboard } from '../util';
 import { useListSort } from '../pages/List/dataHooks';
+import PageLoading from './PageLoading';
+import { NoResults } from './NoResults';
+
+const Render = ({ children }) => children();
 
 // Styled Components
 const Table = styled('table')({
@@ -214,12 +219,6 @@ class ListRow extends Component {
         {fields.map(field => {
           const { path } = field;
 
-          const isLoading = !item.hasOwnProperty(path);
-
-          if (isLoading) {
-            return <BodyCell key={path} />; // TODO: Better loading state?
-          }
-
           if (itemErrors[path] instanceof Error && itemErrors[path].name === 'AccessDeniedError') {
             return (
               <BodyCell key={path}>
@@ -292,6 +291,12 @@ class ListRow extends Component {
   }
 }
 
+const SingleCell = ({ columns, children }) => (
+  <tr>
+    <td colSpan={columns}>{children}</td>
+  </tr>
+);
+
 export default function ListTable(props) {
   const {
     adminPath,
@@ -304,18 +309,24 @@ export default function ListTable(props) {
     onChange,
     onSelectChange,
     selectedItems,
+    currentPage,
+    filters,
+    search,
   } = props;
 
   const [sortBy, onSortChange] = useListSort(list.key);
 
   const handleSelectAll = () => {
-    const allSelected = items.length === selectedItems.length;
+    const allSelected = items && items.length === selectedItems.length;
     const value = allSelected ? [] : items.map(i => i.id);
     onSelectChange(value);
   };
 
   const cypressId = 'ks-list-table';
 
+  // +2 because of check-boxes on left, and overflow menu on right
+  const columns = fields.length + 2;
+
   return (
     <Card css={{ marginBottom: '3em' }}>
       <Table id={cypressId} style={{ tableLayout: isFullWidth ? null : 'fixed' }}>
@@ -331,7 +342,7 @@ export default function ListTable(props) {
             <HeaderCell>
               <div css={{ position: 'relative', top: 3 }}>
                 <CheckboxPrimitive
-                  checked={items.length === selectedItems.length}
+                  checked={items && items.length === selectedItems.length}
                   onChange={handleSelectAll}
                   tabIndex="0"
                 />
@@ -352,19 +363,65 @@ export default function ListTable(props) {
           </tr>
         </thead>
         <tbody>
-          {items.map((item, itemIndex) => (
-            <ListRow
-              fields={fields}
-              isSelected={selectedItems.includes(item.id)}
-              item={item}
-              itemErrors={itemsErrors[itemIndex] || {}}
-              key={item.id}
-              link={({ path, id }) => `${adminPath}/${path}/${id}`}
-              list={list}
-              onDelete={onChange}
-              onSelectChange={onSelectChange}
-            />
-          ))}
+          <Suspense
+            fallback={
+              <SingleCell columns={columns}>
+                <PageLoading />
+              </SingleCell>
+            }
+          >
+            <Render>
+              {() => {
+                // Now that the network request for data has been triggered, we
+                // try to initialise the fields. They are Suspense capable, so may
+                // throw Promises which will be caught by the above <Suspense>
+                captureSuspensePromises(
+                  fields
+                    .filter(field => field.path !== '_label_')
+                    .map(field => () => field.initCellView())
+                );
+
+                // NOTE: We don't check for isLoading here because we want to
+                // avoid showing the <PageLoading /> component when we already
+                // have (possibly stale) data to show.
+                // Instead, we show the loader when there's _no data at all_.
+                if (!items) {
+                  return (
+                    <SingleCell columns={columns}>
+                      <PageLoading />
+                    </SingleCell>
+                  );
+                }
+
+                if (!items.length) {
+                  return (
+                    <SingleCell columns={columns}>
+                      <NoResults
+                        currentPage={currentPage}
+                        filters={filters}
+                        list={list}
+                        search={search}
+                      />
+                    </SingleCell>
+                  );
+                }
+
+                return items.map((item, itemIndex) => (
+                  <ListRow
+                    fields={fields}
+                    isSelected={selectedItems.includes(item.id)}
+                    item={item}
+                    itemErrors={itemsErrors[itemIndex] || {}}
+                    key={item.id}
+                    link={({ path, id }) => `${adminPath}/${path}/${id}`}
+                    list={list}
+                    onDelete={onChange}
+                    onSelectChange={onSelectChange}
+                  />
+                ));
+              }}
+            </Render>
+          </Suspense>
         </tbody>
       </Table>
     </Card>

diff --git a/...s/admin-ui/client/pages/List/NoResults.js → ...s/admin-ui/client/components/NoResults.js b/...s/admin-ui/client/pages/List/NoResults.js → ...s/admin-ui/client/components/NoResults.js
@@ -6,7 +6,7 @@ import { Button } from '@arch-ui/button';
 import { InfoIcon } from '@arch-ui/icons';
 import { colors } from '@arch-ui/theme';
 
-import { useListPagination } from './dataHooks';
+import { useListPagination } from '../pages/List/dataHooks';
 
 const NoResultsWrapper = ({ children, ...props }) => (
   <div
@@ -27,7 +27,7 @@ const NoResultsWrapper = ({ children, ...props }) => (
   </div>
 );
 
-export const NoResults = ({ currentPage, filters, itemCount, list, search }) => {
+export const NoResults = ({ currentPage, filters, list, search }) => {
   const { onChange } = useListPagination(list.key);
   const onResetPage = () => onChange(1);
 
@@ -64,9 +64,5 @@ export const NoResults = ({ currentPage, filters, itemCount, list, search }) =>
     );
   }
 
-  if (itemCount === 0) {
-    return <NoResultsWrapper>No {list.plural.toLowerCase()} to display yet...</NoResultsWrapper>;
-  }
-
-  return null;
+  return <NoResultsWrapper>No {list.plural.toLowerCase()} to display yet...</NoResultsWrapper>;
 };
diff --git a/packages/admin-ui/client/pages/List/index.js b/packages/admin-ui/client/pages/List/index.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/core';
-import { Fragment, Suspense, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { Query } from 'react-apollo';
 
 import { IconButton } from '@arch-ui/button';
@@ -18,7 +18,6 @@ import CreateItemModal from '../../components/CreateItemModal';
 import DocTitle from '../../components/DocTitle';
 import ListTable from '../../components/ListTable';
 import PageError from '../../components/PageError';
-import PageLoading from '../../components/PageLoading';
 import { DisclosureArrow } from '../../components/Popout';
 import { deconstructErrorsToDataShape } from '../../util';
 
@@ -28,7 +27,6 @@ import SortPopout from './SortSelect';
 import Pagination, { getPaginationLabel } from './Pagination';
 import Search from './Search';
 import Management, { ManageToolbar } from './Management';
-import { NoResults } from './NoResults';
 import { useListFilter, useListSelect, useListSort, useListUrlState } from './dataHooks';
 
 const HeaderInset = props => (
@@ -204,66 +202,52 @@ function ListLayout(props: LayoutProps) {
       />
 
       <Container isFullWidth>
-        {items ? (
-          <Suspense fallback={<PageLoading />}>
-            {items.length ? (
-              <ListTable
-                adminPath={adminPath}
-                columnControl={
-                  <ColumnPopout
-                    listKey={list.key}
-                    target={handlers => (
-                      <Tooltip placement="top" content="Columns">
-                        {ref => (
-                          <Button
-                            variant="subtle"
-                            css={{
-                              background: 0,
-                              border: 0,
-                              color: colors.N40,
-                            }}
-                            {...handlers}
-                            ref={applyRefs(handlers.ref, ref)}
-                          >
-                            <KebabHorizontalIcon />
-                          </Button>
-                        )}
-                      </Tooltip>
-                    )}
-                  />
-                }
-                fields={fields}
-                handleSortChange={handleSortChange}
-                isFullWidth
-                items={items}
-                itemsErrors={itemErrors}
-                list={list}
-                onChange={onDeleteItem}
-                onSelectChange={onSelectChange}
-                selectedItems={selectedItems}
-                sortBy={sortBy}
-              />
-            ) : (
-              <NoResults
-                currentPage={currentPage}
-                filters={filters}
-                itemCount={itemCount}
-                list={list}
-                search={search}
-              />
-            )}
-          </Suspense>
-        ) : (
-          <PageLoading />
-        )}
+        <ListTable
+          adminPath={adminPath}
+          columnControl={
+            <ColumnPopout
+              listKey={list.key}
+              target={handlers => (
+                <Tooltip placement="top" content="Columns">
+                  {ref => (
+                    <Button
+                      variant="subtle"
+                      css={{
+                        background: 0,
+                        border: 0,
+                        color: colors.N40,
+                      }}
+                      {...handlers}
+                      ref={applyRefs(handlers.ref, ref)}
+                    >
+                      <KebabHorizontalIcon />
+                    </Button>
+                  )}
+                </Tooltip>
+              )}
+            />
+          }
+          fields={fields}
+          handleSortChange={handleSortChange}
+          isFullWidth
+          items={items}
+          itemsErrors={itemErrors}
+          list={list}
+          onChange={onDeleteItem}
+          onSelectChange={onSelectChange}
+          selectedItems={selectedItems}
+          sortBy={sortBy}
+          currentPage={currentPage}
+          filters={filters}
+          search={search}
+        />
       </Container>
     </main>
   );
 }
 
 function List(props: Props) {
-  const { adminMeta, list, query, routeProps } = props;
-  const { urlState } = useListUrlState(list.key);
+  const { list, query, routeProps } = props;
 
   // get item data
   let items;
@@ -296,11 +280,6 @@ function List(props: Props) {
     }
   }, []);
 
-  // TODO: put this in some effect to limit calls
-  // we want to preload the Field components
-  // so that we don't have a waterfall after the data loads
-  adminMeta.preloadViews(urlState.fields.map(({ views }) => views && views.Cell).filter(x => x));
-
   // Error
   // ------------------------------
   // Only show error page if there is no data