[Glitch] Improve collection page loading states

Port afeb63d287a888d0ae475ab0c66ce53c0595d489 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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,53 +193,41 @@ export const CollectionAccountsList: React.FC<{
         tabIndex={-1}
         ref={listHeadingRef}
       >
-        {collection ? (
+        <FormattedMessage
-          <FormattedMessage
+          id='collections.account_count'
-            id='collections.account_count'
+          defaultMessage='{count, plural, one {# account} other {# accounts}}'
-            defaultMessage='{count, plural, one {# account} other {# accounts}}'
+          values={{ count: collection.item_count }}
-            values={{ count: collection.item_count }}
+        />
-          />
-        ) : (
-          <FormattedMessage
-            id='collections.detail.accounts_heading'
-            defaultMessage='Accounts'
-          />
-        )}
       </h3>
-      {collection && (
+      <SensitiveScreen
-        <SensitiveScreen
+        sensitive={!isOwnCollection && collection.sensitive}
-          sensitive={!isOwnCollection && collection.sensitive}
+        focusTargetRef={listHeadingRef}
-          focusTargetRef={listHeadingRef}
+      >
-        >
+        <ItemList emptyMessage={intl.formatMessage(messages.empty)}>
-          <ItemList
+          <TruncatedListItems
-            isLoading={isLoading}
+            visibleItems={visibleAccounts}
-            emptyMessage={intl.formatMessage(messages.empty)}
+            truncatedItems={hiddenAccounts}
-          >
+            toggleButton={{
-            <TruncatedListItems
+              icon: VisibilityOffIcon,
-              visibleItems={visibleAccounts}
+              title: (
-              truncatedItems={hiddenAccounts}
+                <FormattedMessage
-              toggleButton={{
+                  id='collections.hidden_accounts_link'
-                icon: VisibilityOffIcon,
+                  defaultMessage='{count, plural, one {# hidden account} other {# hidden accounts}}'
-                title: (
+                  values={{ count: hiddenAccounts.length }}
-                  <FormattedMessage
+                />
-                    id='collections.hidden_accounts_link'
+              ),
-                    defaultMessage='{count, plural, one {# hidden account} other {# hidden accounts}}'
+              subtitle: (
-                    values={{ count: hiddenAccounts.length }}
+                <FormattedMessage
-                  />
+                  id='collections.hidden_accounts_description'
-                ),
+                  defaultMessage='You’ve blocked or muted {count, plural, one {this user} other {these users}}'
-                subtitle: (
+                  values={{ count: hiddenAccounts.length }}
-                  <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>
-              renderListItem={renderListItem}
-            />
-          </ItemList>
-        </SensitiveScreen>
-      )}
     </>
   );
 };

app/javascript/flavours/glitch/features/collections/detail/index.tsx

@@ -23,6 +23,7 @@ import { DisplayName } from 'flavours/glitch/components/display_name';
 import { useAccountHandle } from 'flavours/glitch/components/display_name/default';
 import { FormattedDateWrapper } from 'flavours/glitch/components/formatted_date';
 import { IconButton } from 'flavours/glitch/components/icon_button';
+import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { Scrollable } from 'flavours/glitch/components/scrollable_list/components';
 import { useAccount } from 'flavours/glitch/hooks/useAccount';
 import { domain, me } from 'flavours/glitch/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/flavours/glitch/features/collections/index.tsx

@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import { EmptyState } from '@/flavours/glitch/components/empty_state';
+import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
 import { TabLink, TabList } from '@/flavours/glitch/components/tab_list';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import { Column } from 'flavours/glitch/components/column';
@@ -131,9 +132,10 @@ export const Collections: React.FC<{
             </TabLink>
           </TabList>
         </header>
-        {collections.length > 0 ? (
+        {status === 'loading' && <LoadingIndicator />}
-          <>
+        {status === 'idle' &&
-            {status === 'idle' && (
+          (collections.length > 0 ? (
+            <>
               <div className={classes.listHeader}>
                 <h2 className={classes.subHeading}>
                   <FormattedMessage
@@ -146,46 +148,42 @@ export const Collections: React.FC<{
                 </h2>
                 {showCreateButton && <CreateButton />}
               </div>
-            )}
+              <ItemList emptyMessage={errorMessage}>
-            <ItemList
+                {!canCreateMoreCollections && (
-              emptyMessage={errorMessage}
+                  <MaxCollectionsCallout
-              isLoading={status === 'loading'}
+                    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 && (
+              <CreateButton />
-                <MaxCollectionsCallout
+            </EmptyState>
-                  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>
-        )}
       </Scrollable>
 
       <Helmet>