ENH Show loading component during ajax read requests

client/src/components/LinkField/LinkField.js

@@ -6,6 +6,7 @@ import { injectGraphql } from 'lib/Injector';
 import fieldHolder from 'components/FieldHolder/FieldHolder';
 import LinkPicker from 'components/LinkPicker/LinkPicker';
 import LinkPickerTitle from 'components/LinkPicker/LinkPickerTitle';
+import Loading from 'components/Loading/Loading';
 import LinkType from 'types/LinkType';
 import LinkModalContainer from 'containers/LinkModalContainer';
 import * as toastsActions from 'state/toasts/ToastsActions';
@@ -45,6 +46,7 @@ const LinkField = ({
 }) => {
  const [data, setData] = useState({});
  const [editingID, setEditingID] = useState(0);
+ const [loading, setLoading] = useState(false);
 
  // Ensure we have a valid array
  let linkIDs = value;
@@ -61,6 +63,7 @@ const LinkField = ({
  // This happens any time a link is added or removed and triggers a re-render
  useEffect(() => {
  if (!editingID && linkIDs.length > 0) {
+ setLoading(true);
  const query = [];
  for (const linkID of linkIDs) {
  query.push(`itemIDs[]=${linkID}`);
@@ -70,9 +73,11 @@ const LinkField = ({
  .then(response => response.json())
  .then(responseJson => {
  setData(responseJson);
+ setLoading(false);
  })
  .catch(() => {
  actions.toasts.error(i18n._t('LinkField.FAILED_TO_LOAD_LINKS', 'Failed to load links'))
+ setLoading(false);
  });
  }
  }, [editingID, value && value.length]);
@@ -172,6 +177,10 @@ const LinkField = ({
  const renderModal = !saveRecordFirst && Boolean(editingID);
  const saveRecordFirstText = i18n._t('LinkField.SAVE_RECORD_FIRST', 'Cannot add links until the record has been saved');
 
+ if (loading && !saveRecordFirst) {
+ return <div className="link-field__loading"><Loading/></div>;
+ }
+
  return <LinkFieldContext.Provider value={{ ownerID, ownerClass, ownerRelation, actions }}>
  { saveRecordFirst && <div className="link-field__save-record-first">{saveRecordFirstText}</div>}
  { renderPicker && <LinkPicker

client/src/components/LinkField/LinkField.scss

@@ -1,3 +1,12 @@
 .link-field__save-record-first {
  padding-top: 7px;
 }
+
+.link-field__loading {
+ .cms-content-loading-spinner {
+ position: initial;
+ }
+ .ui-widget-overlay-light {
+ opacity: 0;
+ }
+}

client/src/components/LinkField/tests/LinkField-test.js

@@ -1,10 +1,14 @@
 /* global jest, test */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Component as LinkField } from '../LinkField';
 
+let doResolve;
+
 jest.mock('lib/Backend', () => ({
- get: () => new Promise(() => {})
+ get: () => new Promise((resolve) => {
+ doResolve = resolve;
+ })
 }));
 
 window.ss.config = {
@@ -25,7 +29,12 @@ function makeProps(obj = {}) {
  value: 123,
  onChange: () => {},
  types: [],
- actions: {},
+ actions: {
+ toasts: {
+ success: () => {},
+ error: () => {}
+ }
+ },
  isMulti: false,
  canCreate: true,
  ownerID: 123,
@@ -41,14 +50,29 @@ test('LinkField will render save-record-first div if ownerID is 0', async () =>
  })}
  />);
  expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(1);
+ expect(container.querySelectorAll('.link-field__loading')).toHaveLength(0);
+ expect(container.querySelectorAll('.link-picker')).toHaveLength(0);
+});
+
+test('LinkField will render loading indicator if ownerID is not 0', async () => {
+ const { container } = render(<LinkField {...makeProps({
+ ownerID: 1
+
+ })}
+ />);
+ expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
+ expect(container.querySelectorAll('.link-field__loading')).toHaveLength(1);
  expect(container.querySelectorAll('.link-picker')).toHaveLength(0);
 });
 
-test('LinkField will render link-picker if ownerID is not 0', async () => {
+test('LinkField will render link-picker if ownerID is not 0 and has finished loading', async () => {
  const { container } = render(<LinkField {...makeProps({
  ownerID: 1
  })}
  />);
+ doResolve();
+ await screen.findByText('Add Link');
  expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
+ expect(container.querySelectorAll('.link-field__loading')).toHaveLength(0);
  expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
 });