diff --git a/src/fireedge/src/client/components/Tabs/Zone/Info/index.js b/src/fireedge/src/client/components/Tabs/Zone/Info/index.js
index 3e1a567f4a..45a46a080a 100644
--- a/src/fireedge/src/client/components/Tabs/Zone/Info/index.js
+++ b/src/fireedge/src/client/components/Tabs/Zone/Info/index.js
@@ -46,7 +46,7 @@ const ZoneInfoTab = ({ tabProps = {}, id }) => {
} = tabProps
const [update] = useUpdateZoneMutation()
- const { data: zone = {} } = useGetZoneQuery({ id })
+ const { data: zone = {} } = useGetZoneQuery(id)
const { TEMPLATE } = zone
const handleAttributeInXml = async (path, newValue) => {
diff --git a/src/fireedge/src/client/components/Tabs/Zone/index.js b/src/fireedge/src/client/components/Tabs/Zone/index.js
index 168dd8a16d..0b04ca7361 100644
--- a/src/fireedge/src/client/components/Tabs/Zone/index.js
+++ b/src/fireedge/src/client/components/Tabs/Zone/index.js
@@ -13,14 +13,14 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'
+import { RESOURCE_NAMES } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useGetZoneQuery } from 'client/features/OneApi/zone'
import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'
import Tabs from 'client/components/Tabs'
import Info from 'client/components/Tabs/Zone/Info'
@@ -32,14 +32,16 @@ const getTabComponent = (tabName) =>
const ZoneTabs = memo(({ id }) => {
const { view, getResourceView } = useViews()
- const { isLoading, isError, error } = useGetZoneQuery(id)
+ const { isError, error, status, data } = useGetZoneQuery(id, {
+ refetchOnMountOrArgChange: 10,
+ })
const tabsAvailable = useMemo(() => {
- const resource = RESOURCE_NAMES.ZONE
+ const resource = RESOURCE_NAMES.HOST
const infoTabs = getResourceView(resource)?.['info-tabs'] ?? {}
return getAvailableInfoTabs(infoTabs, getTabComponent, id)
- }, [view])
+ }, [view, id])
if (isError) {
return (
@@ -49,11 +51,11 @@ const ZoneTabs = memo(({ id }) => {
)
}
- return isLoading ? (
-
- ) : (
-
- )
+ if (status === 'fulfilled' || id === data?.ID) {
+ return
+ }
+
+ return
})
ZoneTabs.propTypes = { id: PropTypes.string.isRequired }
diff --git a/src/fireedge/src/client/containers/Zones/index.js b/src/fireedge/src/client/containers/Zones/index.js
index 84ee574e6b..f71268d3a2 100644
--- a/src/fireedge/src/client/containers/Zones/index.js
+++ b/src/fireedge/src/client/containers/Zones/index.js
@@ -13,25 +13,25 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { ReactElement, useState, memo } from 'react'
-import PropTypes from 'prop-types'
+import { Box, Chip, Stack, Typography } from '@mui/material'
+import Cancel from 'iconoir-react/dist/Cancel'
import GotoIcon from 'iconoir-react/dist/Pin'
import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
-import Cancel from 'iconoir-react/dist/Cancel'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import PropTypes from 'prop-types'
+import { ReactElement, memo, useState } from 'react'
import { Row } from 'react-table'
+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
+import MultipleTags from 'client/components/MultipleTags'
+import SplitPane from 'client/components/SplitPane'
+import { ZonesTable } from 'client/components/Tables'
+import ZoneTabs from 'client/components/Tabs/Zone'
+import { T, Zone } from 'client/constants'
import {
useLazyGetZoneQuery,
useUpdateZoneMutation,
} from 'client/features/OneApi/zone'
-import { ZonesTable } from 'client/components/Tables'
-import ZoneTabs from 'client/components/Tabs/Zone'
-import SplitPane from 'client/components/SplitPane'
-import MultipleTags from 'client/components/MultipleTags'
-import { SubmitButton } from 'client/components/FormControl'
-import { Tr } from 'client/components/HOC'
-import { T, Zone } from 'client/constants'
/**
* Displays a list of Zones with a split pane between the list and selected row(s).
@@ -99,7 +99,7 @@ const InfoTabs = memo(({ zone, gotoPage, unselect }) => {
icon={}
tooltip={Tr(T.Refresh)}
isSubmitting={isFetching}
- onClick={() => get({ id })}
+ onClick={() => get(id)}
/>
{typeof gotoPage === 'function' && (