Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Do not show empty state when loading followers. Closes #2249

Browse Source
This commit is contained in:
Gabe Kangas 2022-11-01 21:10:55 -07:00
parent 21369caee5
commit a89bceea37
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
View File

@ -1,5 +1,5 @@
import { FC, useEffect, useState } from 'react';
import { Col, Pagination, Row } from 'antd';
import { Col, Pagination, Row, Skeleton } from 'antd';
import { Follower } from '../../../../interfaces/follower';
import { SingleFollower } from '../SingleFollower/SingleFollower';
import styles from './FollowerCollection.module.scss';
@ -16,6 +16,8 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
const [followers, setFollowers] = useState<Follower[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(true);
const pages = Math.ceil(total / ITEMS_PER_PAGE);
const getFollowers = async () => {
@ -39,6 +41,10 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
getFollowers();
}, [page]);
useEffect(() => {
setLoading(false);
}, [followers]);
const noFollowers = (
<div className={styles.noFollowers}>
<h2>Be the first follower!</h2>
@ -56,6 +62,12 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
</div>
);
const loadingSkeleton = <Skeleton active paragraph={{ rows: 3 }} />;
if (loading) {
return loadingSkeleton;
}
if (!followers?.length) {
return noFollowers;
}
@ -64,7 +76,7 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
<div className={styles.followers}>
<Row wrap gutter={[10, 10]}>
{followers.map(follower => (
<Col>
<Col key={follower.link}>
<SingleFollower key={follower.link} follower={follower} />
</Col>
))}