From a7bbc0872aee61288d04f4d1e85d848dbffc3cb6 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 22 Apr 2026 15:33:34 +0200
Subject: [PATCH] [Glitch] Fix ugly Combobox loading state

Port e3c0883d329b5201348ae4d6505ca6b1709c3e47 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../form_fields/combobox.module.scss          | 22 ++++++++++++++++++-
 .../components/form_fields/combobox_field.tsx | 17 ++++++++++++--
 .../features/collections/editor/details.tsx   |  6 ++++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss b/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss
index c14bac0cb6..e64c5e679e 100644
--- a/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss
+++ b/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);
+  }
+}
diff --git a/app/javascript/flavours/glitch/components/form_fields/combobox_field.tsx b/app/javascript/flavours/glitch/components/form_fields/combobox_field.tsx
index 9422acfa4c..654507fe03 100644
--- a/app/javascript/flavours/glitch/components/form_fields/combobox_field.tsx
+++ b/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;
diff --git a/app/javascript/flavours/glitch/features/collections/editor/details.tsx b/app/javascript/flavours/glitch/features/collections/editor/details.tsx
index 4fdb870ac1..a80e58d273 100644
--- a/app/javascript/flavours/glitch/features/collections/editor/details.tsx
+++ b/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}
     />
   );
 };