♿ [open-formulieren/open-forms#4717] Added text alternative to loader

src/components/Loader.js

@@ -1,20 +1,29 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 import {getBEMClassName} from 'utils';
 
 export const MODIFIERS = ['centered', 'only-child', 'small', 'gray'];
 
-const Loader = ({modifiers = []}) => {
+const Loader = ({modifiers = [], withoutTranslation}) => {
  const className = getBEMClassName('loading', modifiers);
  return (
  <div className={className} role="status">
  <span className={getBEMClassName('loading__spinner')} />
+ <span className="sr-only">
+ {withoutTranslation ? (
+ 'Loading...'
+ ) : (
+ <FormattedMessage description="Loading content text" defaultMessage="Loading..." />
+ )}
+ </span>
  </div>
  );
 };
 
 Loader.propTypes = {
+ withoutTranslation: PropTypes.bool,
  modifiers: PropTypes.arrayOf(PropTypes.oneOf(MODIFIERS)),
 };
 

src/components/Loader.stories.js

@@ -5,6 +5,7 @@ export default {
  component: _Loader,
  args: {
  modifiers: [],
+ withoutTranslation: true
  },
  argTypes: {
  modifiers: {

src/i18n.js

@@ -66,7 +66,7 @@ const I18NManager = ({languageSelectorTarget, onLanguageChangeDone, children}) =
  };
  }, [baseUrl, languageCode]);
 
- if (loading) return <Loader modifiers={['centered']} />;
+ if (loading) return <Loader modifiers={['centered']} withoutTranslation />;
 
  if (error) {
  throw error;

src/i18n/messages/en.json

@@ -684,6 +684,11 @@
  "description": "return to form start link after 403",
  "originalDefault": "Back to form start"
  },
+ "eAmrdi": {
+ "defaultMessage": "Loading...",
+ "description": "Loading content text",
+ "originalDefault": "Loading..."
+ },
  "eO6Ysb": {
  "defaultMessage": "Your payment is currently processing.",
  "description": "payment processing status",

src/i18n/messages/nl.json

@@ -693,6 +693,11 @@
  "description": "return to form start link after 403",
  "originalDefault": "Back to form start"
  },
+ "eAmrdi": {
+ "defaultMessage": "Loading...",
+ "description": "Loading content text",
+ "originalDefault": "Loading..."
+ },
  "eO6Ysb": {
  "defaultMessage": "De betaling wordt momenteel verwerkt.",
  "description": "payment processing status",