diff --git a/app/javascript/mastodon/features/collections/detail/accounts_list.tsx b/app/javascript/mastodon/features/collections/detail/accounts_list.tsx index 3a5547a946..01718381c9 100644 --- a/app/javascript/mastodon/features/collections/detail/accounts_list.tsx +++ b/app/javascript/mastodon/features/collections/detail/accounts_list.tsx @@ -99,15 +99,14 @@ const getCollectionItems = createAppSelector( ); export const CollectionAccountsList: React.FC<{ - collection?: ApiCollectionJSON; - isLoading: boolean; -}> = ({ collection, isLoading }) => { + collection: ApiCollectionJSON; +}> = ({ collection }) => { const intl = useIntl(); const confirmRevoke = useConfirmRevoke(collection); const listHeadingRef = useRef(null); - const isOwnCollection = collection?.account_id === me; - const { account_id: collectionOwnerId, id } = collection ?? {}; + const isOwnCollection = collection.account_id === me; + const { account_id: collectionOwnerId, id } = collection; const relationships = useAppSelector((state) => state.relationships); const collectionAccounts = useAppSelector((state) => @@ -194,53 +193,41 @@ export const CollectionAccountsList: React.FC<{ tabIndex={-1} ref={listHeadingRef} > - {collection ? ( - - ) : ( - - )} + - {collection && ( - - - - ), - subtitle: ( - - ), - }} - renderListItem={renderListItem} - /> - - - )} + + + + ), + subtitle: ( + + ), + }} + renderListItem={renderListItem} + /> + + ); }; diff --git a/app/javascript/mastodon/features/collections/detail/index.tsx b/app/javascript/mastodon/features/collections/detail/index.tsx index ff18320341..12701d1fd4 100644 --- a/app/javascript/mastodon/features/collections/detail/index.tsx +++ b/app/javascript/mastodon/features/collections/detail/index.tsx @@ -23,6 +23,7 @@ import { DisplayName } from 'mastodon/components/display_name'; import { useAccountHandle } from 'mastodon/components/display_name/default'; import { FormattedDateWrapper } from 'mastodon/components/formatted_date'; import { IconButton } from 'mastodon/components/icon_button'; +import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import { Scrollable } from 'mastodon/components/scrollable_list/components'; import { useAccount } from 'mastodon/hooks/useAccount'; import { domain, me } from 'mastodon/initial_state'; @@ -218,7 +219,6 @@ export const CollectionDetailPage: React.FC<{ const collection = useAppSelector((state) => id ? state.collections.collections[id] : undefined, ); - const isLoading = !!id && !collection; useEffect(() => { if (id) { @@ -239,8 +239,14 @@ export const CollectionDetailPage: React.FC<{ /> - {collection && } - + {collection ? ( + <> + + + + ) : ( + + )} diff --git a/app/javascript/mastodon/features/collections/index.tsx b/app/javascript/mastodon/features/collections/index.tsx index 5b6d50a3eb..7561849fc0 100644 --- a/app/javascript/mastodon/features/collections/index.tsx +++ b/app/javascript/mastodon/features/collections/index.tsx @@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet'; import { Link } from 'react-router-dom'; import { EmptyState } from '@/mastodon/components/empty_state'; +import { LoadingIndicator } from '@/mastodon/components/loading_indicator'; import { TabLink, TabList } from '@/mastodon/components/tab_list'; import AddIcon from '@/material-icons/400-24px/add.svg?react'; import { Column } from 'mastodon/components/column'; @@ -128,9 +129,10 @@ export const Collections: React.FC<{ - {collections.length > 0 ? ( - <> - {status === 'idle' && ( + {status === 'loading' && } + {status === 'idle' && + (collections.length > 0 ? ( + <>

{showCreateButton && }

- )} - + {!canCreateMoreCollections && ( + + )} + {collections.map((item, index) => ( + + ))} + + + ) : ( + + } + message={ + + } > - {!canCreateMoreCollections && ( - - )} - {collections.map((item, index) => ( - - ))} - - - ) : ( - - } - message={ - - } - > - - - )} + + + ))} diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index db68bb9b75..8019566ef6 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -391,7 +391,6 @@ "collections.create_collection": "Create collection", "collections.delete_collection": "Delete collection", "collections.description_length_hint": "100 characters limit", - "collections.detail.accounts_heading": "Accounts", "collections.detail.author_added_you_on_date": "{author} added you on {date}", "collections.detail.loading": "Loading collection…", "collections.detail.revoke_inclusion": "Remove me",