about summary refs log tree commit diff
path: root/app/javascript/mastodon/features/directory/index.js
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2022-03-07 11:38:52 +0100
committerGitHub <noreply@github.com>2022-03-07 11:38:52 +0100
commitdba4be1038063845a74e83aaa85d6ab08d5625dd (patch)
tree860f03ea524ae14d6e78a5f7aae0e7d2729a9d76 /app/javascript/mastodon/features/directory/index.js
parent292c75aa319c877406356a1cb4fb41f4ab597cfd (diff)
Change appearance of account cards in web UI (#17689)
* Change appearance of account cards in web UI

* Various fixes and improvements

* Various fixes and improvements
Diffstat (limited to 'app/javascript/mastodon/features/directory/index.js')
-rw-r--r--app/javascript/mastodon/features/directory/index.js10
1 files changed, 6 insertions, 4 deletions
diff --git a/app/javascript/mastodon/features/directory/index.js b/app/javascript/mastodon/features/directory/index.js
index 88f20d330..94d7d1a9c 100644
--- a/app/javascript/mastodon/features/directory/index.js
+++ b/app/javascript/mastodon/features/directory/index.js
@@ -10,9 +10,9 @@ import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
 import { List as ImmutableList } from 'immutable';
 import AccountCard from './components/account_card';
 import RadioButton from 'mastodon/components/radio_button';
-import classNames from 'classnames';
 import LoadMore from 'mastodon/components/load_more';
 import ScrollContainer from 'mastodon/containers/scroll_container';
+import LoadingIndicator from 'mastodon/components/loading_indicator';
 
 const messages = defineMessages({
   title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
@@ -129,7 +129,7 @@ class Directory extends React.PureComponent {
     const pinned = !!columnId;
 
     const scrollableArea = (
-      <div className='scrollable' style={{ background: 'transparent' }}>
+      <div className='scrollable'>
         <div className='filter-form'>
           <div className='filter-form__column' role='group'>
             <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} />
@@ -142,8 +142,10 @@ class Directory extends React.PureComponent {
           </div>
         </div>
 
-        <div className={classNames('directory__list', { loading: isLoading })}>
-          {accountIds.map(accountId => <AccountCard id={accountId} key={accountId} />)}
+        <div className='directory__list'>
+          {isLoading ? <LoadingIndicator /> : accountIds.map(accountId => (
+            <AccountCard id={accountId} key={accountId} />
+          ))}
         </div>
 
         <LoadMore onClick={this.handleLoadMore} visible={!isLoading} />