[6.x] Fixes loading component (#25819)

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js

@@ -16,10 +16,7 @@ import {
   EuiButton,
   EuiFieldText,
 } from '@elastic/eui';
-
-// TODO: (clintandrewhall) This is a quick fix for #25342 -- we should figure out how to use the overall component.
-import { Loading } from '../../../../public/components/loading/loading';
-
+import { Loading } from '../../../../public/components/loading';
 import { FileUpload } from '../../../../public/components/file_upload';
 import { elasticOutline } from '../../../lib/elastic_outline';
 import { resolveFromArgs } from '../../../../common/lib/resolve_dataurl';

x-pack/plugins/canvas/public/components/element_content/element_content.js

@@ -23,8 +23,7 @@ const branches = [
   // no renderable or renderable config value, render loading
   branch(({ renderable, state }) => {
     return !state || !renderable;
-  }, renderComponent(Loading)),
-
+  }, renderComponent(({ backgroundColor }) => <Loading backgroundColor={backgroundColor} />)),
   // renderable is available, but no matching element is found, render invalid
   branch(({ renderable, renderFunction }) => {
     return renderable && getType(renderable) !== 'render' && !renderFunction;
@@ -90,4 +89,5 @@ ElementContent.propTypes = {
     onComplete: PropTypes.func.isRequired, // local, not passed through
   }).isRequired,
   state: PropTypes.string,
+  backgroundColor: PropTypes.string,
 };

x-pack/plugins/canvas/public/components/element_content/index.js

@@ -5,12 +5,19 @@
  */
 
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { compose, withProps } from 'recompose';
 import { get } from 'lodash';
 import { renderFunctionsRegistry } from '../../lib/render_functions_registry';
+import { getSelectedPage, getPageById } from '../../state/selectors/workpad';
 import { ElementContent as Component } from './element_content';
 
+const mapStateToProps = state => ({
+  backgroundColor: getPageById(state, getSelectedPage(state)).style.background,
+});
+
 export const ElementContent = compose(
+  connect(mapStateToProps),
   withProps(({ renderable }) => ({
     renderFunction: renderFunctionsRegistry.get(get(renderable, 'as')),
   }))

x-pack/plugins/canvas/public/components/loading/index.js

@@ -4,12 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { getSelectedPage, getPageById } from '../../state/selectors/workpad';
+import { pure } from 'recompose';
 import { Loading as Component } from './loading';
 
-const mapStateToProps = state => ({
-  backgroundColor: getPageById(state, getSelectedPage(state)).style.background,
-});
-
-export const Loading = connect(mapStateToProps)(Component);
+export const Loading = pure(Component);

x-pack/plugins/canvas/public/components/loading/loading.js

@@ -41,11 +41,12 @@ export const Loading = ({ animated, text, backgroundColor }) => {
 
 Loading.propTypes = {
   animated: PropTypes.bool,
-  text: PropTypes.string,
   backgroundColor: PropTypes.string,
+  text: PropTypes.string,
 };
 
 Loading.defaultProps = {
   animated: false,
+  backgroundColor: '#000000',
   text: '',
 };