loadingMessage fix

packages/core/helper-plugin/lib/src/components/ReactSelect/ReactSelect.js

@@ -6,6 +6,7 @@ import { useTheme } from 'styled-components';
 import ClearIndicator from './components/ClearIndicator';
 import DropdownIndicator from './components/DropdownIndicator';
 import IndicatorSeparator from './components/IndicatorSeparator';
+import LoadingMessage from './components/LoadingMessage';
 
 import getSelectStyles from './utils/getSelectStyles';
 
@@ -17,7 +18,13 @@ const ReactSelect = ({ components, styles, error, ariaErrorMessage, ...props })
     <Select
       {...props}
       menuPosition="fixed"
-      components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, ...components }}
+      components={{
+        ClearIndicator,
+        DropdownIndicator,
+        IndicatorSeparator,
+        LoadingMessage,
+        ...components,
+      }}
       aria-errormessage={error && ariaErrorMessage}
       aria-invalid={!!error}
       styles={{ ...customStyles, ...styles }}

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
-import { useIntl } from 'react-intl';
 
 import { Badge } from '@strapi/design-system/Badge';
 import { Box } from '@strapi/design-system/Box';
@@ -50,8 +49,6 @@ export const RelationInput = ({
   publicationStateTranslations,
   searchResults,
 }) => {
-  const { formatMessage } = useIntl();
-
   return (
     <Field error={error} name={name} hint={description} id={id}>
       <Relation
@@ -67,7 +64,7 @@ export const RelationInput = ({
               inputId={id}
               isSearchable
               isClear
-              loadingMessage={() => <Loader small>{formatMessage(loadingMessage)}</Loader>}
+              loadingMessage={() => loadingMessage}
               onChange={onRelationAdd}
               onInputChange={onSearch}
               onMenuClose={onRelationOpen}
@@ -135,7 +132,7 @@ export const RelationInput = ({
             })}
           {relations.isLoading && (
             <RelationItemCenterChildren>
-              <Loader small>{formatMessage(loadingMessage)}</Loader>
+              <Loader small>{loadingMessage}</Loader>
             </RelationItemCenterChildren>
           )}
         </RelationList>
@@ -198,10 +195,7 @@ RelationInput.propTypes = {
   label: PropTypes.string.isRequired,
   labelLoadMore: PropTypes.string.isRequired,
   listHeight: PropTypes.string,
-  loadingMessage: PropTypes.shape({
-    id: PropTypes.string,
-    defaultMessage: PropTypes.string,
-  }).isRequired,
+  loadingMessage: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onRelationAdd: PropTypes.func.isRequired,
   onRelationOpen: PropTypes.func.isRequired,