diff --git a/app/javascript/mastodon/components/form_fields/combobox.module.scss b/app/javascript/mastodon/components/form_fields/combobox.module.scss index c14bac0cb6..e64c5e679e 100644 --- a/app/javascript/mastodon/components/form_fields/combobox.module.scss +++ b/app/javascript/mastodon/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/mastodon/components/form_fields/combobox_field.tsx b/app/javascript/mastodon/components/form_fields/combobox_field.tsx index 40199d47ed..f3e7b45476 100644 --- a/app/javascript/mastodon/components/form_fields/combobox_field.tsx +++ b/app/javascript/mastodon/components/form_fields/combobox_field.tsx @@ -22,6 +22,8 @@ import { matchWidth } from 'mastodon/components/dropdown/utils'; import { IconButton } from 'mastodon/components/icon_button'; import { useOnClickOutside } from 'mastodon/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 = (
{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 {status}; + return ( + + {isLoading && ( + + + + )} + {status} + + ); } return children; diff --git a/app/javascript/mastodon/components/form_fields/toggle.module.css b/app/javascript/mastodon/components/form_fields/toggle.module.css index 997434f336..b1f7e71b9f 100644 --- a/app/javascript/mastodon/components/form_fields/toggle.module.css +++ b/app/javascript/mastodon/components/form_fields/toggle.module.css @@ -1,3 +1,13 @@ +.wrapper { + --diameter: 20px; + --padding: 2px; + --transition: 0.2s ease-in-out; + + display: inline-block; + position: relative; + height: calc(var(--diameter) + var(--padding) * 2); +} + .input { position: absolute; opacity: 0; @@ -9,10 +19,6 @@ } .toggle { - --diameter: 20px; - --padding: 2px; - --transition: 0.2s ease-in-out; - display: inline-flex; align-items: center; border-radius: 9999px; @@ -68,8 +74,3 @@ :global([dir='rtl']) .input:checked + .toggle::before { transform: translateX(calc(-1 * (var(--diameter) - (var(--padding) * 2)))); } - -.wrapper { - display: inline-block; - position: relative; -} diff --git a/app/javascript/mastodon/components/form_fields/toggle_field.tsx b/app/javascript/mastodon/components/form_fields/toggle_field.tsx index 75fdb8f21b..3de09823d3 100644 --- a/app/javascript/mastodon/components/form_fields/toggle_field.tsx +++ b/app/javascript/mastodon/components/form_fields/toggle_field.tsx @@ -31,20 +31,17 @@ ToggleField.displayName = 'ToggleField'; export const Toggle = forwardRef( ({ className, size, ...otherProps }, ref) => ( - + -