diff --git a/libs/pages/database/src/lib/page-database.tsx b/libs/pages/database/src/lib/page-database.tsx index 2816d222f4e..dbad38c0d1d 100644 --- a/libs/pages/database/src/lib/page-database.tsx +++ b/libs/pages/database/src/lib/page-database.tsx @@ -1,10 +1,10 @@ +import equal from 'fast-deep-equal' import { Environment } from 'qovery-typescript-axios' import { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Route, Routes, useParams } from 'react-router-dom' import { databasesLoadingStatus, - fetchDatabase, fetchDatabaseMasterCredentials, fetchDatabaseMetrics, selectDatabaseById, @@ -17,25 +17,28 @@ import { ROUTER_DATABASE } from './router/router' import Container from './ui/container/container' export function PageDatabase() { - useDocumentTitle('Database - Qovery') const { databaseId = '', environmentId = '' } = useParams() const environment = useSelector((state) => selectEnvironmentById(state, environmentId) ) - const database = useSelector((state) => selectDatabaseById(state, databaseId)) + + const database = useSelector( + (state) => selectDatabaseById(state, databaseId), + equal + ) + + useDocumentTitle(`${database?.name || 'Database'} - Qovery`) const loadingStatus = useSelector((state) => databasesLoadingStatus(state)) const dispatch = useDispatch() useEffect(() => { - if (databaseId && loadingStatus === 'loaded') { + if (database && databaseId && loadingStatus === 'loaded') { database?.metrics?.loadingStatus !== 'loaded' && dispatch(fetchDatabaseMetrics({ databaseId })) database?.credentials?.loadingStatus !== 'loaded' && dispatch(fetchDatabaseMasterCredentials({ databaseId })) - } else { - dispatch(fetchDatabase({ databaseId })) } - }, [databaseId, loadingStatus]) + }, [database && databaseId, loadingStatus]) return (