placeholder table instead of spinner

client/src/App.js

@@ -1,20 +1,19 @@
 import React, { createContext, useState } from "react";
 import {
-    Box,
-    Button,
-    Collapsible,
-    Heading,
-    Grommet,
-    Layer,
-    Footer,
-    Anchor,
-    ResponsiveContext,
-  } from 'grommet';
+  Box,
+  Button,
+  Collapsible,
+  Heading,
+  Grommet,
+  Layer,
+  Footer,
+  Anchor,
+  ResponsiveContext,
+} from 'grommet';
 import { CircleQuestion, FormClose, Github } from 'grommet-icons';
 import PidInput from './components/pidinput/pidinput.component';
 import Help from './components/help/help.component';
 import ListEOL from './components/list/list.component';
-import Spinner from "./components/spinner/spinner";
 
 // Create context object
 export const AppContext = createContext();
@@ -51,65 +50,64 @@ function App() {
     <Grommet theme={theme} themeMode="dark" full>
       <ResponsiveContext.Consumer>
         {size => (
-      <Box fill>
-        <AppBar>
-          <Heading level='3' margin='none'>Cisco Support API Client</Heading>
-          <Button
-            icon={<CircleQuestion />}
-            onClick={() => setShowSidebar(!showSidebar)}
-          />        
-        </AppBar>
-        <Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
-          <Box flex align='center' justify='center'>
-            <AppContext.Provider value={{ eoxdata, setEoxdata }}>
-              <PidInput />
-              <ListEOL />
-              <Spinner />
-            </AppContext.Provider>
-          </Box>
-          {(!showSidebar || size !== 'small') ? (
-            <Collapsible direction="horizontal" open={showSidebar}>
-              <Box
-                flex
-                width='medium'
-                background='light-2'
-                elevation='small'
-                align='start'
-                justify='center'
-              >
-                <Help />
-              </Box>
-            </Collapsible>
-          ): (
-            <Layer>
-              <Box
-                background='light-2'
-                tag='header'
-                justify='end'
-                align='center'
-                direction='row'
-              >
-                <Button
-                  icon={<FormClose />}
-                  onClick={() => setShowSidebar(false)}
-                />
+          <Box fill>
+            <AppBar>
+              <Heading level='3' margin='none'>Cisco Support API Client</Heading>
+              <Button
+                icon={<CircleQuestion />}
+                onClick={() => setShowSidebar(!showSidebar)}
+              />
+            </AppBar>
+            <Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
+              <Box flex align='center' justify='center'>
+                <AppContext.Provider value={{ eoxdata, setEoxdata }}>
+                  <PidInput />
+                    <ListEOL />
+                </AppContext.Provider>
               </Box>
-              <Box
-                fill
-                background='light-2'
-                align='start'
-                justify='center'
-              >
-                <Help />
-              </Box>
-            </Layer>
-          )}
-        </Box>
-        <Footer justify="center" background="brand" pad="small">
-          <Anchor href="https://github.com/dteslya/cisco-api-client" target="_blank"><Github /></Anchor>
-        </Footer>
-      </Box>
-      )}
+              {(!showSidebar || size !== 'small') ? (
+                <Collapsible direction="horizontal" open={showSidebar}>
+                  <Box
+                    flex
+                    width='medium'
+                    background='light-2'
+                    elevation='small'
+                    align='start'
+                    justify='center'
+                  >
+                    <Help />
+                  </Box>
+                </Collapsible>
+              ) : (
+                  <Layer>
+                    <Box
+                      background='light-2'
+                      tag='header'
+                      justify='end'
+                      align='center'
+                      direction='row'
+                    >
+                      <Button
+                        icon={<FormClose />}
+                        onClick={() => setShowSidebar(false)}
+                      />
+                    </Box>
+                    <Box
+                      fill
+                      background='light-2'
+                      align='start'
+                      justify='center'
+                    >
+                      <Help />
+                    </Box>
+                  </Layer>
+                )}
+            </Box>
+            <Footer justify="center" background="brand" pad="small">
+              <Anchor href="https://github.com/dteslya/cisco-api-client" target="_blank"><Github /></Anchor>
+            </Footer>
+          </Box>
+        )}
       </ResponsiveContext.Consumer>
     </Grommet>
   );

client/src/components/list/list.component.jsx

@@ -1,65 +1,103 @@
 import React, { useContext } from 'react';
 
-import { Box, DataTable } from 'grommet';
+import { Text, Box, DataTable } from 'grommet';
 
 // Import Context
 import { AppContext } from '../../App';
+import { usePromiseTracker } from 'react-promise-tracker';
 
 export const ListEOL = () => {
-    const eoxdata = useContext(AppContext);
-    // items to display
-    const step = 10
+  const eoxdata = useContext(AppContext);
+  const { promiseInProgress } = usePromiseTracker();
 
-    // define datatable columns
-    const columns = [
-        {
-            property: 'key',
-            header: 'Num',
-            primary: true,
-            size: "xxsmall"
-        },
-        {
-            property: 'EOLProductID',
-            header: "Device Product Number",
-            size: "medium"
-        },
-        {
-            property: 'EOXExternalAnnouncementDate',
-            header: 'End Of Life',
-            size: "xsmall"
-        },
-        {
-            property: 'EndOfSaleDate',
-            header: 'End Of Sale',
-            size: "xsmall"
-        },
-        {
-            property: 'LastDateOfSupport',
-            header: 'End Of Support',
-            size: "xsmall"
-        },
-        {
-            property: 'MigrationProductName',
-            header: 'Recommended Replacement'
-        }
+  // items to display
+  const step = 10
 
-    ]
-    return (
-        <Box align="center" fill="horizontal" pad="medium" flex>
-            <DataTable
-                //columns={columns}
-                columns={columns.map(c => ({
-                    ...c,
-                    search: c.property === 'EOLProductID',
-                }))}
-                data={eoxdata.eoxdata}
-                step={step}
-                size="medium"
-                //resizeable
-                sortable
-                onMore={() => { console.log(`InfiniteScroll fires onMore after loading ${step} items`) }} />
-        </Box>
-    );
+  // define datatable columns
+  const columns = [
+    {
+      property: 'key',
+      header: 'Num',
+      primary: true,
+      size: "xxsmall"
+    },
+    {
+      property: 'EOLProductID',
+      header: "Device Product Number",
+      size: "medium"
+    },
+    {
+      property: 'EOXExternalAnnouncementDate',
+      header: 'End Of Life',
+      size: "xsmall"
+    },
+    {
+      property: 'EndOfSaleDate',
+      header: 'End Of Sale',
+      size: "xsmall"
+    },
+    {
+      property: 'LastDateOfSupport',
+      header: 'End Of Support',
+      size: "xsmall"
+    },
+    {
+      property: 'MigrationProductName',
+      header: 'Recommended Replacement'
+    }
+
+  ]
+  return (
+    <Box align="center" fill="horizontal" pad="medium" flex>
+      { promiseInProgress ? (
+        <DataTable
+          columns={columns.map(c => ({
+            ...c,
+            search: c.property === 'EOLProductID',
+          }))}
+          data={eoxdata.eoxdata}
+          step={step}
+          size="medium"
+          sortable
+          placeholder={
+            <Box
+              fill
+              align="center"
+              justify="center"
+              direction="row"
+              pad="large"
+              gap="small"
+              background={{ color: 'background-front', opacity: 'strong' }}
+            >
+              <Box
+                direction="row"
+                border={[
+                  { side: 'all', color: 'transparent', size: 'medium' },
+                  { side: 'horizontal', color: 'brand', size: 'medium' },
+                ]}
+                pad="small"
+                round="full"
+                animation={{ type: 'rotateRight', duration: 1500 }}
+              />
+              <Text weight="bold">Loading ...</Text>
+            </Box>
+          }
+          onMore={() => { console.log(`InfiniteScroll fires onMore after loading ${step} items`) }} />
+      ) : (
+          <DataTable
+            columns={columns.map(c => ({
+              ...c,
+              search: c.property === 'EOLProductID',
+            }))}
+            data={eoxdata.eoxdata}
+            step={step}
+            size="medium"
+            sortable
+            onMore={() => { console.log(`InfiniteScroll fires onMore after loading ${step} items`) }} />
+        )
+      }
+    </Box>
+  );
 }
 
 export default ListEOL;