[Glitch] Fix ugly Combobox loading state

Port e3c0883d329b5201348ae4d6505ca6b1709c3e47 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/form_fields/combobox.module.scss

@@ -76,6 +76,26 @@
 }
 
 .emptyMessage {
-  padding: 8px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: 16px;
   font-size: 13px;
 }
+
+.loadingIndicator {
+  --spinner-size: 20px;
+
+  position: relative;
+  display: block;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  overflow: hidden;
+
+  & :global(.circular-progress) {
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+  }
+}

app/javascript/flavours/glitch/components/form_fields/combobox_field.tsx

@@ -22,6 +22,8 @@ import { matchWidth } from 'flavours/glitch/components/dropdown/utils';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { useOnClickOutside } from 'flavours/glitch/hooks/useOnClickOutside';
 
+import { LoadingIndicator } from '../loading_indicator';
+
 import classes from './combobox.module.scss';
 import { FormFieldWrapper } from './form_field_wrapper';
 import type { CommonFieldWrapperProps } from './form_field_wrapper';
@@ -531,6 +533,7 @@ const ComboboxWithRef = <Item extends ComboboxItem, GroupKey extends string>(
           <div {...props} className={classNames(classes.popover, placement)}>
             <StatusMessageWrapper
               showStatus={showStatusMessageInMenu}
+              isLoading={isLoading}
               status={statusMessage}
             >
               {hasGroups ? (
@@ -592,10 +595,20 @@ Combobox.displayName = 'Combobox';
 const StatusMessageWrapper: React.FC<{
   showStatus: boolean;
   status: string;
+  isLoading: boolean;
   children: React.ReactNode;
-}> = ({ showStatus, status, children }) => {
+}> = ({ showStatus, status, isLoading, children }) => {
   if (showStatus) {
-    return <span className={classes.emptyMessage}>{status}</span>;
+    return (
+      <span className={classes.emptyMessage}>
+        {isLoading && (
+          <span className={classes.loadingIndicator}>
+            <LoadingIndicator role='none' />
+          </span>
+        )}
+        {status}
+      </span>
+    );
   }
 
   return children;

app/javascript/flavours/glitch/features/collections/editor/details.tsx

@@ -331,6 +331,10 @@ const TopicField: React.FC = () => {
     [topic],
   );
 
+  const isCurrentTopicOnlySuggestion =
+    tags.length === 1 && tags[0]?.id === 'new';
+  const hideTagSuggestions = !tags.length || isCurrentTopicOnlySuggestion;
+
   return (
     <ComboboxField
       required={false}
@@ -369,7 +373,7 @@ const TopicField: React.FC = () => {
             }
           : undefined
       }
-      suppressMenu={!tags.length}
+      suppressMenu={hideTagSuggestions}
     />
   );
 };