review next round

packages/plugins/i18n/admin/src/components/LocaleSelect/index.js

@@ -1,11 +1,20 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Select, Option } from '@strapi/parts/Select';
+import { Loader } from '@strapi/parts/Loader';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import useLocales from '../../hooks/useLocales';
 import useDefaultLocales from '../../hooks/useDefaultLocales';
 import { getTrad } from '../../utils';
 
+const SmallLoader = styled(Loader)`
+  img {
+    height: 1rem;
+    width: 1rem;
+  }
+`;
+
 /**
  * The component is memoized and needs a useCallback over the onLocaleChange and
  * onClear props to prevent the Select from re-rendering N times when typing on a specific
@@ -21,16 +30,18 @@ const LocaleSelect = React.memo(({ value, onLocaleChange, error, onClear }) => {
       label: locale.name,
       value: locale.code,
     }))
-    .filter(({ label }) => {
-      const foundLocale = locales.find(({ code }) => code === label);
+    .filter(({ value: v }) => {
+      const foundLocale = locales.find(({ code }) => code === v);
 
       return !foundLocale;
     });
 
-  const computedValue = value || options[0]?.value || '';
+  const computedValue = value || '';
 
   return (
     <Select
+      startIcon={isLoading ? <SmallLoader>Loading the locales...</SmallLoader> : undefined}
+      aria-busy={isLoading}
       label={formatMessage({
         id: getTrad('Settings.locales.modal.locales.label'),
         defaultMessage: 'Locales',

packages/plugins/i18n/admin/src/hooks/useDefaultLocales/index.js

@@ -1,5 +1,8 @@
 import { useQuery } from 'react-query';
 import { request, useNotification } from '@strapi/helper-plugin';
+import { useNotifyAT } from '@strapi/parts/LiveRegions';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils';
 
 const fetchDefaultLocalesList = async toggleNotification => {
   try {
@@ -19,9 +22,20 @@ const fetchDefaultLocalesList = async toggleNotification => {
 };
 
 const useDefaultLocales = () => {
+  const { formatMessage } = useIntl();
+  const { notifyStatus } = useNotifyAT();
   const toggleNotification = useNotification();
   const { isLoading, data } = useQuery('default-locales', () =>
-    fetchDefaultLocalesList(toggleNotification)
+    fetchDefaultLocalesList(toggleNotification).then(data => {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('Settings.locales.modal.locales.loaded'),
+          defaultMessage: 'The locales have been successfully loaded.',
+        })
+      );
+
+      return data;
+    })
   );
 
   return { defaultLocales: data, isLoading };

packages/plugins/i18n/admin/src/pages/SettingsPage/index.js

@@ -1,23 +1,16 @@
 import React from 'react';
 import { useRBAC } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
 import LocaleSettingsPage from './LocaleSettingsPage';
 import i18nPermissions from '../../permissions';
-import { getTrad } from '../../utils';
 
 const ProtectedLocaleSettingsPage = () => {
-  const { formatMessage } = useIntl();
   const {
     isLoading,
     allowedActions: { canRead, canUpdate, canCreate, canDelete },
   } = useRBAC(i18nPermissions);
 
   if (isLoading) {
-    return (
-      <div>
-        <p>{formatMessage({ id: getTrad('Settings.permissions.loading') })}</p>
-      </div>
-    );
+    return null;
   }
 
   return (

packages/plugins/i18n/admin/src/translations/en.json

@@ -41,6 +41,7 @@
   "Settings.locales.modal.locales.displayName.description": "Locale will be displayed under that name in the administration panel",
   "Settings.locales.modal.locales.displayName.error": "The locale display name can only be less than 50 characters.",
   "Settings.locales.modal.locales.label": "Locales",
+  "Settings.locales.modal.locales.loaded": "The locales have been successfully loaded.",
   "Settings.locales.modal.title": "Configurations",
   "Settings.locales.row.id": "ID",
   "Settings.locales.row.displayName": "Display name",