fix notify load

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',

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',

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;
 };
 

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';
 

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,