diff --git a/app/javascript/mastodon/components/loading_indicator.tsx b/app/javascript/mastodon/components/loading_indicator.tsx index 53d216a9946..925ad84a56c 100644 --- a/app/javascript/mastodon/components/loading_indicator.tsx +++ b/app/javascript/mastodon/components/loading_indicator.tsx @@ -36,7 +36,7 @@ export const LoadingIndicator: React.FC = ({ {...a11yProps} aria-label={intl.formatMessage(messages.loading)} > - + ); }; diff --git a/app/javascript/mastodon/features/compose/redesign/trigger.tsx b/app/javascript/mastodon/features/compose/redesign/trigger.tsx index 05f616ec1ad..53de8b29274 100644 --- a/app/javascript/mastodon/features/compose/redesign/trigger.tsx +++ b/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 ( - }> + + + + } + > ); diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error/index.tsx b/app/javascript/mastodon/features/ui/components/bundle_column_error/index.tsx index 572ab159dff..81e5640d31d 100644 --- a/app/javascript/mastodon/features/ui/components/bundle_column_error/index.tsx +++ b/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 = ({ return ( + {isRedesignEnabled() && }
{errorType === 'network' && onRetry && ( diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error/styles.module.scss b/app/javascript/mastodon/features/ui/components/bundle_column_error/styles.module.scss index 62549efffc2..35c1b019c46 100644 --- a/app/javascript/mastodon/features/ui/components/bundle_column_error/styles.module.scss +++ b/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 { diff --git a/app/javascript/mastodon/features/ui/components/column_loading.tsx b/app/javascript/mastodon/features/ui/components/column_loading.tsx deleted file mode 100644 index 4b5a91b2f34..00000000000 --- a/app/javascript/mastodon/features/ui/components/column_loading.tsx +++ /dev/null @@ -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 = (otherProps) => ( - - -
- -); diff --git a/app/javascript/mastodon/features/ui/components/column_loading/index.tsx b/app/javascript/mastodon/features/ui/components/column_loading/index.tsx new file mode 100644 index 00000000000..e25296c0afa --- /dev/null +++ b/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 = (otherProps) => ( + + {isRedesignEnabled() ? ( + + ) : ( + + )} +
+
+ + +
+
+
+); diff --git a/app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss b/app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss new file mode 100644 index 00000000000..cbb6afb00ea --- /dev/null +++ b/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; + } +}