[Glitch] Implement new design for "Refetch all"

Port 3a81ee8f5b to glitch-soc

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

app/javascript/flavours/glitch/components/alert/alert.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   component: Alert,
   args: {
     isActive: true,
+    isLoading: false,
     animateFrom: 'side',
     title: '',
     message: '',
@@ -20,6 +21,12 @@ const meta = {
       type: 'boolean',
       description: 'Animate to the active (displayed) state of the alert',
     },
+    isLoading: {
+      control: 'boolean',
+      type: 'boolean',
+      description:
+        'Display a loading indicator in the alert, replacing the dismiss button if present',
+    },
     animateFrom: {
       control: 'radio',
       type: 'string',
@@ -108,3 +115,11 @@ export const InSizedContainer: Story = {
     </div>
   ),
 };
+
+export const WithLoadingIndicator: Story = {
+  args: {
+    ...WithDismissButton.args,
+    isLoading: true,
+  },
+  render: InSizedContainer.render,
+};

app/javascript/flavours/glitch/components/alert/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 
 import { IconButton } from '../icon_button';
 
@@ -10,21 +11,23 @@ import { IconButton } from '../icon_button';
  * Snackbar/Toast-style notification component.
  */
 export const Alert: React.FC<{
-  isActive?: boolean;
-  animateFrom?: 'side' | 'below';
   title?: string;
   message: string;
   action?: string;
   onActionClick?: () => void;
   onDismiss?: () => void;
+  isActive?: boolean;
+  isLoading?: boolean;
+  animateFrom?: 'side' | 'below';
 }> = ({
-  isActive,
-  animateFrom = 'side',
   title,
   message,
   action,
   onActionClick,
   onDismiss,
+  isActive,
+  isLoading,
+  animateFrom = 'side',
 }) => {
   const intl = useIntl();
 
@@ -51,7 +54,13 @@ export const Alert: React.FC<{
         </button>
       )}
 
-      {onDismiss && (
+      {isLoading && (
+        <span className='notification-bar__loading-indicator'>
+          <LoadingIndicator />
+        </span>
+      )}
+
+      {onDismiss && !isLoading && (
         <IconButton
           title={intl.formatMessage({
             id: 'dismissable_banner.dismiss',

app/javascript/flavours/glitch/components/exit_animation_wrapper.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A helper component for managing the rendering of components that
+ * need to stay in the DOM a bit longer to finish their CSS exit animation.
+ *
+ * In the future, replace this component with plain CSS once that is feasible.
+ * This will require broader support for `transition-behavior: allow-discrete`
+ * and https://developer.mozilla.org/en-US/docs/Web/CSS/overlay.
+ */
+export const ExitAnimationWrapper: React.FC<{
+  /**
+   * Set this to true to indicate that the nested component should be rendered
+   */
+  isActive: boolean;
+  /**
+   * How long the component should be rendered after `isActive` was set to `false`
+   */
+  delayMs?: number;
+  /**
+   * Set this to true to also delay the entry of the nested component until after
+   * another one has exited full.
+   */
+  withEntryDelay?: boolean;
+  /**
+   * Render prop that provides the nested component with the `delayedIsActive` flag
+   */
+  children: (delayedIsActive: boolean) => React.ReactNode;
+}> = ({ isActive = false, delayMs = 500, withEntryDelay, children }) => {
+  const [delayedIsActive, setDelayedIsActive] = useState(false);
+
+  useEffect(() => {
+    if (isActive && !withEntryDelay) {
+      setDelayedIsActive(true);
+
+      return () => '';
+    } else {
+      const timeout = setTimeout(() => {
+        setDelayedIsActive(isActive);
+      }, delayMs);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [isActive, delayMs, withEntryDelay]);
+
+  if (!isActive && !delayedIsActive) {
+    return null;
+  }
+
+  return children(isActive && delayedIsActive);
+};