Communicate and handle apub outgoing updates being delayed (#4009)

* Allow icon only status messages such as STATUS_PROCESSING to be displayed

* Add a processing status state for the EditSocialLinks component

* Log warning for the outbound apub channel being full

* Buffer the outbound apub channel so some API requests are less likely to get blocked during handling

* Make the apub outbound request trace-log always occur after being queued.

* Linting fix

web/components/admin/FormStatusIndicator.tsx

@@ -12,7 +12,7 @@ export const FormStatusIndicator: FC<FormStatusIndicatorProps> = ({ status }) =>
   const classes = classNames({
     'status-container': true,
     [`status-${type}`]: type,
-    empty: !message,
+    empty: !message && !icon,
   });
   return (
     <span className={classes}>

web/components/admin/config/general/EditSocialLinks.tsx

@@ -19,7 +19,12 @@ import {
   DEFAULT_TEXTFIELD_URL_PATTERN,
 } from '../../../../utils/validators';
 import { TextField } from '../../TextField';
-import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';
+import {
+  createInputStatus,
+  STATUS_ERROR,
+  STATUS_PROCESSING,
+  STATUS_SUCCESS,
+} from '../../../../utils/input-statuses';
 import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Title } = Typography;
@@ -140,6 +145,11 @@ export default function EditSocialLinks() {
 
   // posts all the variants at once as an array obj
   const postUpdateToAPI = async (postValue: any) => {
+    if (!displayModal) {
+      // only create the processing status if the modal is inactive
+      resetTimer = null;
+      setSubmitStatus(createInputStatus(STATUS_PROCESSING));
+    }
     await postConfigUpdateToAPI({
       apiPath: API_SOCIAL_HANDLES,
       data: { value: postValue },