Added skeleton to stories list

Author: SundeepChand

src/assets/scss/components/vote.scss

@@ -3,6 +3,13 @@
   border-radius: 10px;
   padding: 4px 4px;
 
+  &-loading {
+    background-color: unset;
+    max-width: 68px;
+    min-width: 50px;
+    width: 10%;
+  }
+
   &-voted {
     background-color: $light-blue;
   }

src/components/Stories.js

@@ -5,7 +5,6 @@ import Button from './Button'
 import StoriesList from './StoriesList'
 import Pagination from './Pagination'
 import Dropdown from './Dropdown'
-import LoadingIndicator from '../modules/LoadingIndicator'
 import SearchInput from '../modules/SearchInput'
 
 import Lists from '../utils/Lists'
@@ -233,17 +232,14 @@ const Stories = ({ authorId, followerId }) => {
           />
         </div>
       </div>
-      {promiseInProgress ? (
-        <LoadingIndicator />
-      ) : (
-        <div className='stories-div'>
-          <StoriesList
-            stories={stories}
-            state={currentStateSelected}
-            product={product}
-          />
-        </div>
-      )}
+      <div className='stories-div'>
+        <StoriesList
+          stories={stories}
+          state={currentStateSelected}
+          product={product}
+          isLoading={promiseInProgress}
+        />
+      </div>
       <Pagination
         getPage={getPage}
         storyCount={storyCount}

src/components/StoriesList.js

@@ -3,9 +3,55 @@ import { navigate, Link } from '@reach/router'
 
 import Vote from './Vote'
 import { strip } from '../utils/filterText'
+import Skeleton from 'react-loading-skeleton'
+
+const StorySkeleton = () => (
+  <div className='story'>
+    <div className='vote-wrapper-loading'>
+      <Skeleton height={80} />
+    </div>
+    <div className='stories-content'>
+      <h3>
+        <Skeleton height={20} />
+      </h3>
+      <p>
+        <Skeleton />
+      </p>
+    </div>
+    <div className='story-author story-subcontent'>
+      <div className='user-avatar'>
+        <Skeleton circle width={58} height={58} />
+      </div>
+      <div className='flex flex-column'>
+        <Skeleton width={52} />
+      </div>
+    </div>
+    <div className='flex flex-column story-subcontent'>
+      <Skeleton width={52} />
+    </div>
+    <div className='flex flex-column'>
+      <span className='story-meta'>
+        <Skeleton width={52} />
+      </span>
+      <span className='story-meta'>
+        <Skeleton width={52} />
+      </span>
+    </div>
+  </div>
+)
 
 const StoriesList = (props) => {
-  const { stories, state, product } = props
+  const { stories, state, product, isLoading } = props
+
+  if (isLoading) {
+    return (
+      <div className='flex flex-column'>
+        {[1, 2, 3, 4, 5].map((i) => (
+          <StorySkeleton key={i} />
+        ))}
+      </div>
+    )
+  }
 
   return (
     <div className='flex flex-column' data-cy='stories'>