Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show loading spinner for news component

Browse Source
This commit is contained in:
Gabe Kangas 2021-04-04 18:43:55 -07:00
parent a6fa16c1bf
commit 70f33b624f
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/news-feed.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable camelcase */ /* eslint-disable camelcase */
/* eslint-disable react/no-danger */ /* eslint-disable react/no-danger */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Typography } from 'antd'; import { Typography, Skeleton } from 'antd';
import format from 'date-fns/format'; import format from 'date-fns/format';
import { fetchExternalData } from '../utils/apis'; import { fetchExternalData } from '../utils/apis';
@ -36,7 +36,11 @@ function ArticleItem({ title, url, content_html: content, date_published: date }
export default function NewsFeed() { export default function NewsFeed() {
const [feed, setFeed] = useState<Article[]>([]); const [feed, setFeed] = useState<Article[]>([]);
const [loading, setLoading] = useState<Boolean>(true);
const getFeed = async () => { const getFeed = async () => {
setLoading(false);
try { try {
const result = await fetchExternalData(OWNCAST_FEED_URL); const result = await fetchExternalData(OWNCAST_FEED_URL);
setFeed(result.items); setFeed(result.items);
@ -49,16 +53,18 @@ export default function NewsFeed() {
getFeed(); getFeed();
}, []); }, []);
if (!feed.length) { const loadingSpinner = loading ? (<Skeleton loading={true} active />) : null;
return null; const noNews = !loading && feed.length === 0 ? (<div>No news.</div>) : null;
}
return ( return (
<section className="news-feed form-module"> <section className="news-feed form-module">
<Title level={2}>News &amp; Updates from Owncast</Title> <Title level={2}>News &amp; Updates from Owncast</Title>
{loadingSpinner}
{feed.map(item => ( {feed.map(item => (
<ArticleItem {...item} key={item.url} /> <ArticleItem {...item} key={item.url} />
))} ))}
{noNews}
</section> </section>
); );
} }