diff --git a/packages/core/admin/admin/src/hooks/useFetchInstalledPlugins/index.js b/packages/core/admin/admin/src/hooks/useFetchInstalledPlugins/index.js index 0963442b0b..fd7f193444 100644 --- a/packages/core/admin/admin/src/hooks/useFetchInstalledPlugins/index.js +++ b/packages/core/admin/admin/src/hooks/useFetchInstalledPlugins/index.js @@ -2,10 +2,15 @@ import { useQuery } from 'react-query'; import { useNotification } from '@strapi/helper-plugin'; import { fetchInstalledPlugins } from './utils/api'; -const useFetchInstalledPlugins = () => { +const useFetchInstalledPlugins = notifyLoad => { const toggleNotification = useNotification(); return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), { + onSuccess: () => { + if (notifyLoad) { + notifyLoad(); + } + }, onError: () => { toggleNotification({ type: 'warning', diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js index 0e90b21b96..7ac8b0da27 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js @@ -1,17 +1,16 @@ import { useQuery } from 'react-query'; import { useNotification } from '@strapi/helper-plugin'; -import { useNotifyAT } from '@strapi/design-system/LiveRegions'; import { fetchMarketplacePlugins } from './utils/api'; -const useFetchMarketplacePlugins = title => { +const useFetchMarketplacePlugins = notifyLoad => { const toggleNotification = useNotification(); - const { notifyStatus } = useNotifyAT(); - const notifyLoad = () => { - notifyStatus(title); - }; - - return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(notifyLoad), { + return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), { + onSuccess: () => { + if (notifyLoad) { + notifyLoad(); + } + }, onError: () => { toggleNotification({ type: 'warning', diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js index 78252c81bb..6f8a8526b9 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js @@ -2,7 +2,7 @@ import axios from 'axios'; const MARKETPLACE_API_URL = 'https://market-api.strapi.io'; -const fetchMarketplacePlugins = async notify => { +const fetchMarketplacePlugins = async () => { const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`); // Only keep v4 plugins @@ -11,8 +11,6 @@ const fetchMarketplacePlugins = async notify => { data: response.data.filter(plugin => plugin.attributes.strapiCompatibility === 'v4'), }; - notify(); - return filteredResponse; }; diff --git a/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js b/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js index 493f2c1e0c..5a10d97db8 100644 --- a/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js +++ b/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js @@ -1,6 +1,7 @@ import React from 'react'; import { useIntl } from 'react-intl'; import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin'; +import { useNotifyAT } from '@strapi/design-system/LiveRegions'; import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; import { Main } from '@strapi/design-system/Main'; import { Typography } from '@strapi/design-system/Typography'; @@ -9,6 +10,7 @@ import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins'; const Plugins = () => { const { formatMessage } = useIntl(); + const { notifyStatus } = useNotifyAT(); useFocusWhenNavigate(); const title = formatMessage({ @@ -16,7 +18,19 @@ const Plugins = () => { defaultMessage: 'Plugins', }); - const { status, data } = useFetchInstalledPlugins(title); + const notifyPluginPageLoad = () => { + notifyStatus( + formatMessage( + { + id: 'app.utils.notify.data-loaded', + defaultMessage: 'The {target} has loaded', + }, + { target: title } + ) + ); + }; + + const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad); const isLoading = status !== 'success' && status !== 'error'; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index ded8f1d5f5..edd904de72 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -13,6 +13,7 @@ import { import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; import { Main } from '@strapi/design-system/Main'; +import { useNotifyAT } from '@strapi/design-system/LiveRegions'; import adminPermissions from '../../permissions'; import PluginCard from './components/PluginCard'; import { fetchAppInformation } from './utils/api'; @@ -22,6 +23,7 @@ import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins'; const MarketPlacePage = () => { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); + const { notifyStatus } = useNotifyAT(); const trackUsageRef = useRef(trackUsage); const toggleNotification = useNotification(); @@ -32,10 +34,22 @@ const MarketPlacePage = () => { defaultMessage: 'Marketplace', }); + const notifyMarketplaceLoad = () => { + notifyStatus( + formatMessage( + { + id: 'app.utils.notify.data-loaded', + defaultMessage: 'The {target} has loaded', + }, + { target: marketplaceTitle } + ) + ); + }; + const { status: marketplacePluginsStatus, data: marketplacePluginsResponse, - } = useFetchMarketplacePlugins(marketplaceTitle); + } = useFetchMarketplacePlugins(notifyMarketplaceLoad); const { status: installedPluginsStatus,