feat: Implement loading state for News page (#581)

* feat: Add LoadingWidget to News page * feat: Update animation speed
USSF-ORBIT · Mar 25, 2022 · f270f22 · f270f22
1 parent 583bd0c
commit f270f22
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/LoadingWidget/LoadingWidget.module.scss b/src/components/LoadingWidget/LoadingWidget.module.scss
@@ -21,11 +21,11 @@
   background-repeat: no-repeat;
   background-size: contain, cover;
   background-position: -500px 0, 0 0;
-  animation: loading 1.5s infinite;
+  animation: loading 2s infinite;
 }
 
 @keyframes loading {
   to {
-    background-position: calc(100% + 500px) 0, 0 0;
+    background-position: calc(100% + 100vw) 0, 0 0;
   }
 }
diff --git a/src/pages/news.tsx b/src/pages/news.tsx
@@ -8,6 +8,7 @@ import {
 
 import { withPageLayout } from 'layout/DefaultLayout/PageLayout'
 import Loader from 'components/Loader/Loader'
+import LoadingWidget from 'components/LoadingWidget/LoadingWidget'
 import { useUser } from 'hooks/useUser'
 import LinkTo from 'components/util/LinkTo/LinkTo'
 import NavLink, { NavLinkProps } from 'components/util/NavLink/NavLink'
@@ -39,6 +40,17 @@ const News = () => {
         <h3>The most recently publicly released Space Force news.</h3>
       </div>
       <Grid row gap={2}>
+        {!items.length && (
+          <>
+            <Grid desktop={{ col: 6 }}>
+              <LoadingWidget />
+            </Grid>
+            <Grid desktop={{ col: 6 }}>
+              <LoadingWidget />
+            </Grid>
+          </>
+        )}
+
         {items
           .filter(validateNewsItems)
           .map((item) => formatRssToArticle(item as Required<RSSNewsItem>))