diff --git a/src/Components/InstancesTable/index.js b/src/Components/InstancesTable/index.js index 31cf540d..5c4c8616 100644 --- a/src/Components/InstancesTable/index.js +++ b/src/Components/InstancesTable/index.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; -import { Button, ClipboardCopy, Card, Pagination } from '@patternfly/react-core'; +import { Button, ClipboardCopy, Card, Pagination, Spinner, Bullseye } from '@patternfly/react-core'; import { useQuery } from 'react-query'; import { SSHUsername } from './helpers'; @@ -17,7 +17,7 @@ const PER_PAGE_OPTIONS = [ ]; const InstancesTable = ({ reservationID, provider, region }) => { const [paginationOptions, setPaginationOptions] = React.useState({ perPage: 5, page: 1, startIdx: 0, endIdx: 5 }); - const { data: instances } = useQuery(['launchInfo', reservationID], () => fetchReservationByProvider(reservationID, provider), { + const { data: instances, isLoading } = useQuery(['launchInfo', reservationID], () => fetchReservationByProvider(reservationID, provider), { select: (reservation) => reservation?.instances, }); @@ -32,6 +32,12 @@ const InstancesTable = ({ reservationID, provider, region }) => { const instancesPerPage = instances?.slice(paginationOptions.startIdx, paginationOptions.endIdx); const atLeastOneDetailNotEmpty = instancesPerPage?.some((instance) => instance.detail?.public_dns?.length > 0); + if (isLoading) + return ( + + + + ); return (