diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js
index 18c96f0b3b..81ced60499 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/index.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js
@@ -65,6 +65,9 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
display: 'flex',
alignItems: 'center',
gap: '1em'
+ },
+ loading: {
+ transition: '200ms'
}
}))
@@ -127,8 +130,7 @@ const EnhancedTable = ({
page,
gotoPage,
pageCount,
- state: { pageIndex, selectedRowIds },
- ...rest
+ state: { pageIndex, selectedRowIds }
} = useTableProps
const selectedRows = React.useMemo(
@@ -161,7 +163,9 @@ const EnhancedTable = ({
- {isLoading && }
+ {isLoading && (
+
+ )}
{page.map(row => {
diff --git a/src/fireedge/src/client/components/Tables/Vms/columns.js b/src/fireedge/src/client/components/Tables/Vms/columns.js
index d71b996505..4b085714b8 100644
--- a/src/fireedge/src/client/components/Tables/Vms/columns.js
+++ b/src/fireedge/src/client/components/Tables/Vms/columns.js
@@ -22,6 +22,6 @@ export default [
{
Header: 'Hostname',
id: 'HOSTNAME',
- accessor: row => VirtualMachineModel.getLastHistory(row)?.HOSTNAME
+ accessor: row => VirtualMachineModel.getLastHistory(row)?.HOSTNAME ?? '--'
}
]
diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js
index 2a75d49a7c..5ab953719b 100644
--- a/src/fireedge/src/client/components/Tables/Vms/index.js
+++ b/src/fireedge/src/client/components/Tables/Vms/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect } from 'react'
import { useAuth } from 'client/features/Auth'
import { useFetch } from 'client/hooks'
@@ -10,46 +10,42 @@ import VmRow from 'client/components/Tables/Vms/row'
import VmDetail from 'client/components/Tables/Vms/detail'
const INITIAL_ELEMENT = 0
-const NUMBER_OF_INTERVAL = 12
+const INTERVAL_ON_FIRST_RENDER = 2_500
const VmsTable = () => {
- const [[start, end], setPage] = useState([INITIAL_ELEMENT, -NUMBER_OF_INTERVAL])
-
const columns = React.useMemo(() => VmColumns, [])
const vms = useVm()
const { getVms } = useVmApi()
const { filterPool } = useAuth()
- const { data, fetchRequest, loading, reloading, error } = useFetch(getVms)
+ const { status, data, fetchRequest, loading, reloading, error } = useFetch(getVms)
- useEffect(() => { fetchRequest({ start, end }) }, [filterPool])
+ useEffect(() => {
+ const requests = {
+ INIT: () => fetchRequest({ start: INITIAL_ELEMENT, end: -INTERVAL_ON_FIRST_RENDER }),
+ FETCHED: () => {
+ const canFetchMore = !error && data?.vms?.length === INTERVAL_ON_FIRST_RENDER
- const fetchMore = useCallback(() => {
- setPage(([prevStart, prevEnd]) => {
- const newStart = prevStart + NUMBER_OF_INTERVAL
- const newEnd = prevEnd - NUMBER_OF_INTERVAL
+ // fetch the rest of VMs, from 0 to last VM ID fetched
+ canFetchMore && fetchRequest({
+ start: INITIAL_ELEMENT,
+ end: data?.vms[INTERVAL_ON_FIRST_RENDER - 1]?.ID
+ })
+ }
+ }
- fetchRequest({ start: newStart, end: newEnd })
-
- return [newStart, newEnd]
- })
- }, [start, end])
-
- const canFetchMore = !error && data?.vms?.length % NUMBER_OF_INTERVAL === 0
+ requests[status]?.()
+ }, [filterPool, status, data])
return (
String(row.ID)}
RowComponent={VmRow}
renderDetail={row => }
- canFetchMore={canFetchMore}
- fetchMore={fetchMore}
/>
)
}