diff --git a/x-pack/plugins/spaces/public/constants.ts b/x-pack/plugins/spaces/public/constants.ts index b513a8affacf82..a2f84bccdb33f6 100644 --- a/x-pack/plugins/spaces/public/constants.ts +++ b/x-pack/plugins/spaces/public/constants.ts @@ -16,10 +16,20 @@ export const getSpacesFeatureDescription = () => { 'Organize your dashboards and other saved objects into meaningful categories.', }); } - return spacesFeatureDescription; }; +let spacesLoadingMessage: string; + +export const getSpacesLoadingMessage = () => { + if (!spacesLoadingMessage) { + spacesLoadingMessage = i18n.translate('xpack.spaces.loadingMessage', { + defaultMessage: 'Loading...', + }); + } + return spacesLoadingMessage; +}; + export const DEFAULT_OBJECT_NOUN = i18n.translate('xpack.spaces.shareToSpace.objectNoun', { defaultMessage: 'object', }); diff --git a/x-pack/plugins/spaces/public/nav_control/components/spaces_description.tsx b/x-pack/plugins/spaces/public/nav_control/components/spaces_description.tsx index dcbd6f21ada8fa..95ae881057edca 100644 --- a/x-pack/plugins/spaces/public/nav_control/components/spaces_description.tsx +++ b/x-pack/plugins/spaces/public/nav_control/components/spaces_description.tsx @@ -13,11 +13,12 @@ import React from 'react'; import type { ApplicationStart, Capabilities } from '@kbn/core/public'; -import { getSpacesFeatureDescription } from '../../constants'; +import { getSpacesFeatureDescription, getSpacesLoadingMessage } from '../../constants'; import { ManageSpacesButton } from './manage_spaces_button'; interface Props { id: string; + isLoading: boolean; toggleSpaceSelector: () => void; capabilities: Capabilities; navigateToApp: ApplicationStart['navigateToApp']; @@ -33,7 +34,7 @@ export const SpacesDescription: FC = (props: Props) => { return ( -

{getSpacesFeatureDescription()}

+

{props.isLoading ? getSpacesLoadingMessage() : getSpacesFeatureDescription()}

{ element = (