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);
 });