Improve collection page loading states (#38847)

app/javascript/mastodon/features/collections/detail/accounts_list.tsx

@@ -99,15 +99,14 @@ const getCollectionItems = createAppSelector(
 );
 
 export const CollectionAccountsList: React.FC<{
-  collection?: ApiCollectionJSON;
+  collection: ApiCollectionJSON;
-  isLoading: boolean;
+}> = ({ collection }) => {
-}> = ({ collection, isLoading }) => {
   const intl = useIntl();
   const confirmRevoke = useConfirmRevoke(collection);
   const listHeadingRef = useRef<HTMLHeadingElement>(null);
 
-  const isOwnCollection = collection?.account_id === me;
+  const isOwnCollection = collection.account_id === me;
-  const { account_id: collectionOwnerId, id } = collection ?? {};
+  const { account_id: collectionOwnerId, id } = collection;
 
   const relationships = useAppSelector((state) => state.relationships);
   const collectionAccounts = useAppSelector((state) =>
@@ -194,28 +193,17 @@ export const CollectionAccountsList: React.FC<{
         tabIndex={-1}
         ref={listHeadingRef}
       >
-        {collection ? (
         <FormattedMessage
           id='collections.account_count'
           defaultMessage='{count, plural, one {# account} other {# accounts}}'
           values={{ count: collection.item_count }}
         />
-        ) : (
-          <FormattedMessage
-            id='collections.detail.accounts_heading'
-            defaultMessage='Accounts'
-          />
-        )}
       </h3>
-      {collection && (
       <SensitiveScreen
         sensitive={!isOwnCollection && collection.sensitive}
         focusTargetRef={listHeadingRef}
       >
-          <ItemList
+        <ItemList emptyMessage={intl.formatMessage(messages.empty)}>
-            isLoading={isLoading}
-            emptyMessage={intl.formatMessage(messages.empty)}
-          >
           <TruncatedListItems
             visibleItems={visibleAccounts}
             truncatedItems={hiddenAccounts}
@@ -240,7 +228,6 @@ export const CollectionAccountsList: React.FC<{
           />
         </ItemList>
       </SensitiveScreen>
-      )}
     </>
   );
 };

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<{
       />
 
       <Scrollable>
-        {collection && <CollectionHeader collection={collection} />}
+        {collection ? (
-        <CollectionAccountsList collection={collection} isLoading={isLoading} />
+          <>
+            <CollectionHeader collection={collection} />
+            <CollectionAccountsList collection={collection} />
+          </>
+        ) : (
+          <LoadingIndicator />
+        )}
       </Scrollable>
 
       <Helmet>

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<{
             </TabLink>
           </TabList>
         </header>
-        {collections.length > 0 ? (
+        {status === 'loading' && <LoadingIndicator />}
+        {status === 'idle' &&
+          (collections.length > 0 ? (
             <>
-            {status === 'idle' && (
               <div className={classes.listHeader}>
                 <h2 className={classes.subHeading}>
                   <FormattedMessage
@@ -143,11 +145,7 @@ export const Collections: React.FC<{
                 </h2>
                 {showCreateButton && <CreateButton />}
               </div>
-            )}
+              <ItemList emptyMessage={errorMessage}>
-            <ItemList
-              emptyMessage={errorMessage}
-              isLoading={status === 'loading'}
-            >
                 {!canCreateMoreCollections && (
                   <MaxCollectionsCallout
                     className={classes.maxCollectionsError}
@@ -182,7 +180,7 @@ export const Collections: React.FC<{
             >
               <CreateButton />
             </EmptyState>
-        )}
+          ))}
       </Scrollable>
 
       <Helmet>

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",