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;
-  isLoading: boolean;
-}> = ({ collection, isLoading }) => {
+  collection: ApiCollectionJSON;
+}> = ({ collection }) => {
   const intl = useIntl();
   const confirmRevoke = useConfirmRevoke(collection);
   const listHeadingRef = useRef<HTMLHeadingElement>(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 ? (
-          <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'
-          />
-        )}
+        <FormattedMessage
+          id='collections.account_count'
+          defaultMessage='{count, plural, one {# account} other {# accounts}}'
+          values={{ count: collection.item_count }}
+        />
       </h3>
-      {collection && (
-        <SensitiveScreen
-          sensitive={!isOwnCollection && collection.sensitive}
-          focusTargetRef={listHeadingRef}
-        >
-          <ItemList
-            isLoading={isLoading}
-            emptyMessage={intl.formatMessage(messages.empty)}
-          >
-            <TruncatedListItems
-              visibleItems={visibleAccounts}
-              truncatedItems={hiddenAccounts}
-              toggleButton={{
-                icon: VisibilityOffIcon,
-                title: (
-                  <FormattedMessage
-                    id='collections.hidden_accounts_link'
-                    defaultMessage='{count, plural, one {# hidden account} other {# hidden accounts}}'
-                    values={{ count: hiddenAccounts.length }}
-                  />
-                ),
-                subtitle: (
-                  <FormattedMessage
-                    id='collections.hidden_accounts_description'
-                    defaultMessage='You’ve blocked or muted {count, plural, one {this user} other {these users}}'
-                    values={{ count: hiddenAccounts.length }}
-                  />
-                ),
-              }}
-              renderListItem={renderListItem}
-            />
-          </ItemList>
-        </SensitiveScreen>
-      )}
+      <SensitiveScreen
+        sensitive={!isOwnCollection && collection.sensitive}
+        focusTargetRef={listHeadingRef}
+      >
+        <ItemList emptyMessage={intl.formatMessage(messages.empty)}>
+          <TruncatedListItems
+            visibleItems={visibleAccounts}
+            truncatedItems={hiddenAccounts}
+            toggleButton={{
+              icon: VisibilityOffIcon,
+              title: (
+                <FormattedMessage
+                  id='collections.hidden_accounts_link'
+                  defaultMessage='{count, plural, one {# hidden account} other {# hidden accounts}}'
+                  values={{ count: hiddenAccounts.length }}
+                />
+              ),
+              subtitle: (
+                <FormattedMessage
+                  id='collections.hidden_accounts_description'
+                  defaultMessage='You’ve blocked or muted {count, plural, one {this user} other {these users}}'
+                  values={{ count: hiddenAccounts.length }}
+                />
+              ),
+            }}
+            renderListItem={renderListItem}
+          />
+        </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} />}
-        <CollectionAccountsList collection={collection} isLoading={isLoading} />
+        {collection ? (
+          <>
+            <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 === 'idle' && (
+        {status === 'loading' && <LoadingIndicator />}
+        {status === 'idle' &&
+          (collections.length > 0 ? (
+            <>
               <div className={classes.listHeader}>
                 <h2 className={classes.subHeading}>
                   <FormattedMessage
@@ -143,46 +145,42 @@ export const Collections: React.FC<{
                 </h2>
                 {showCreateButton && <CreateButton />}
               </div>
-            )}
-            <ItemList
-              emptyMessage={errorMessage}
-              isLoading={status === 'loading'}
+              <ItemList emptyMessage={errorMessage}>
+                {!canCreateMoreCollections && (
+                  <MaxCollectionsCallout
+                    className={classes.maxCollectionsError}
+                  />
+                )}
+                {collections.map((item, index) => (
+                  <CollectionListItem
+                    withTimestamp
+                    withAuthorHandle={false}
+                    key={item.id}
+                    collection={item}
+                    positionInList={index + 1}
+                    listSize={collections.length}
+                  />
+                ))}
+              </ItemList>
+            </>
+          ) : (
+            <EmptyState
+              title={
+                <FormattedMessage
+                  id='empty_column.account_featured_self.showcase_accounts'
+                  defaultMessage='Showcase your favorite accounts'
+                />
+              }
+              message={
+                <FormattedMessage
+                  id='empty_column.account_featured_self.showcase_accounts_desc'
+                  defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
+                />
+              }
             >
-              {!canCreateMoreCollections && (
-                <MaxCollectionsCallout
-                  className={classes.maxCollectionsError}
-                />
-              )}
-              {collections.map((item, index) => (
-                <CollectionListItem
-                  withTimestamp
-                  withAuthorHandle={false}
-                  key={item.id}
-                  collection={item}
-                  positionInList={index + 1}
-                  listSize={collections.length}
-                />
-              ))}
-            </ItemList>
-          </>
-        ) : (
-          <EmptyState
-            title={
-              <FormattedMessage
-                id='empty_column.account_featured_self.showcase_accounts'
-                defaultMessage='Showcase your favorite accounts'
-              />
-            }
-            message={
-              <FormattedMessage
-                id='empty_column.account_featured_self.showcase_accounts_desc'
-                defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
-              />
-            }
-          >
-            <CreateButton />
-          </EmptyState>
-        )}
+              <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",