Redesign: Update design of column loading & error states (#40465)

app/javascript/mastodon/components/loading_indicator.tsx

@@ -36,7 +36,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       {...a11yProps}
       aria-label={intl.formatMessage(messages.loading)}
     >
-      <CircularProgress size={50} strokeWidth={6} />
+      <CircularProgress size={50} strokeWidth={2} />
     </div>
   );
 };

app/javascript/mastodon/features/compose/redesign/trigger.tsx

@@ -12,7 +12,6 @@ import {
 } from '@phosphor-icons/react';
 
 import { IconButton } from '@/mastodon/components/button/redesign';
-import { CircularProgress } from '@/mastodon/components/circular_progress';
 import {
   Menu,
   MenuTrigger,
@@ -90,7 +89,25 @@ export const ComposeRedesignButton: React.FC<{
       '--viewport-height': viewportHeight ? `${viewportHeight}px` : undefined,
     } as React.CSSProperties;
     return (
-      <Suspense fallback={<CircularProgress strokeWidth={2} size={50} />}>
+      <Suspense
+        fallback={
+          <IconButton
+            loading
+            icon={PenNibIcon}
+            className={classNames(
+              classes.button,
+              inline && classes.buttonInline,
+            )}
+            variant='solid'
+            size='lg'
+          >
+            <FormattedMessage
+              id='compose.new'
+              defaultMessage='Write a new post or messsage'
+            />
+          </IconButton>
+        }
+      >
         <ComposeLazyForm autoFocus className={classes.composer} style={style} />
       </Suspense>
     );

app/javascript/mastodon/features/ui/components/bundle_column_error/index.tsx

@@ -6,8 +6,10 @@ import { Link } from 'react-router-dom';
 import { Helmet } from '@unhead/react/helmet';
 
 import { Column } from '@/mastodon/components/column';
+import { ColumnHeader } from '@/mastodon/components/column_header';
 import { CopyButton } from '@/mastodon/components/copy_button';
 import { EmptyState } from '@/mastodon/components/empty_state';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import { Button } from 'mastodon/components/button';
 
 import classes from './styles.module.scss';
@@ -74,11 +76,15 @@ export const BundleColumnError: React.FC<BundleColumnErrorProps> = ({
 
   return (
     <Column bindToDocument={!multiColumn}>
+      {isRedesignEnabled() && <ColumnHeader title={title} />}
       <EmptyState
         image='error'
-        title={title}
+        title={isRedesignEnabled() ? null : title}
         message={body}
-        className={classes.error}
+        className={classNames(
+          classes.error,
+          isRedesignEnabled() && classes.errorRedesign,
+        )}
       >
         <div className={classes.actions}>
           {errorType === 'network' && onRetry && (

app/javascript/mastodon/features/ui/components/bundle_column_error/styles.module.scss

@@ -1,7 +1,10 @@
 .error {
   flex-grow: 1;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 4px;
+
+  &:not(.errorRedesign) {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+  }
 }
 
 .actions {

app/javascript/mastodon/features/ui/components/column_loading.tsx

@@ -1,10 +0,0 @@
-import { Column } from '@/mastodon/components/column';
-import { ColumnHeader } from '@/mastodon/components/column/header';
-import type { ColumnHeaderProps } from '@/mastodon/components/column/header';
-
-export const ColumnLoading: React.FC<ColumnHeaderProps> = (otherProps) => (
-  <Column>
-    <ColumnHeader {...otherProps} />
-    <div className='scrollable' />
-  </Column>
-);

app/javascript/mastodon/features/ui/components/column_loading/index.tsx

@@ -0,0 +1,29 @@
+import { FormattedMessage } from 'react-intl';
+
+import { CircularProgress } from '@/mastodon/components/circular_progress';
+import { Column } from '@/mastodon/components/column';
+import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header';
+import type { ColumnHeaderProps } from '@/mastodon/components/column/header';
+import { ColumnHeader } from '@/mastodon/components/column_header';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
+
+import classes from './styles.module.scss';
+
+export const ColumnLoading: React.FC<ColumnHeaderProps> = (otherProps) => (
+  <Column>
+    {isRedesignEnabled() ? (
+      <ColumnHeader title='' />
+    ) : (
+      <LegacyColumnHeader {...otherProps} />
+    )}
+    <div className='scrollable'>
+      <div className={classes.loadingWrapper}>
+        <CircularProgress size={30} strokeWidth={2} />
+        <FormattedMessage
+          id='loading_indicator.label'
+          defaultMessage='Loading…'
+        />
+      </div>
+    </div>
+  </Column>
+);

app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss

@@ -0,0 +1,19 @@
+@use '@/styles/mastodon/mixins';
+
+.loadingWrapper {
+  @include mixins.type-label-md;
+
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  height: 100%;
+  gap: var(--space-sm);
+  opacity: 0;
+  animation: fade-in 300ms ease-in 1.2s forwards;
+}
+
+@keyframes fade-in {
+  to {
+    opacity: 1;
+  }
+}