add loading cards for round cards

packages/prop-house-webapp/package.json

@@ -60,6 +60,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-jazzicon": "^1.0.4",
     "react-loading": "^2.0.3",
+    "react-loading-skeleton": "^3.3.1",
     "react-markdown": "^8.0.1",
     "react-modal": "^3.15.1",
     "react-papaparse": "^4.1.0",

packages/prop-house-webapp/src/components/JumboCardLoading/JumboCardLoading.module.css

@@ -0,0 +1,5 @@
+@media (max-width: 767px) {
+  .roundCard {
+    height: 25rem;
+  }
+}

packages/prop-house-webapp/src/components/JumboCardLoading/index.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import Card, { CardBgColor, CardBorderRadius } from '../Card';
+import classes from '../JumboRoundCard/JumboRoundCard.module.css';
+import customClasses from './JumboCardLoading.module.css';
+import 'react-loading-skeleton/dist/skeleton.css';
+import { Col, Row } from 'react-bootstrap';
+import Skeleton from 'react-loading-skeleton';
+import { isMobile } from 'web3modal';
+
+const JumboCardLoading = () => {
+  return (
+    <Card
+      bgColor={CardBgColor.LightPurple}
+      borderRadius={CardBorderRadius.twenty}
+      classNames={clsx(classes.roundCard, customClasses.roundCard)}
+      onHoverEffect={false}
+    >
+      <Row>
+        <Col lg={6}>
+          <Skeleton height={30} style={{ marginBottom: '12px' }} />
+          <Skeleton height={60} style={{ marginTop: 'auto' }} />
+        </Col>
+        <Col lg={6}>
+          <Skeleton
+            height={30}
+            style={{ marginBottom: '12px', marginTop: isMobile() ? '30px' : '0px' }}
+          />
+          <Row>
+            {Array.from(Array(3).keys()).map(i => (
+              <Col>
+                <Skeleton height={60} inline />
+              </Col>
+            ))}
+          </Row>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default JumboCardLoading;

packages/prop-house-webapp/src/components/JumboRoundCard/index.tsx

@@ -30,6 +30,7 @@ import { cmdPlusClicked } from '../../utils/cmdPlusClicked';
 import { openInNewTab } from '../../utils/openInNewTab';
 import { useContentModeration } from '../../hooks/useContentModeration';
 import { useIsHiddenRound } from '../../hooks/useIsHiddenRound';
+import JumboCardLoading from '../JumboCardLoading';
 
 const JumboRoundCard: React.FC<{
   round: Round;
@@ -131,7 +132,9 @@ const JumboRoundCard: React.FC<{
     fetchProposals();
   });
 
-  return isHidden === undefined || isHidden ? (
+  return isHidden === undefined ? (
+    <JumboCardLoading />
+  ) : isHidden ? (
     <></>
   ) : (
     <div

packages/prop-house-webapp/src/components/RoundsFeed/index.tsx

@@ -3,7 +3,6 @@ import { RoundWithHouse, usePropHouse } from '@prophouse/sdk-react';
 import React, { useEffect, useState } from 'react';
 import { Col, Dropdown, Row } from 'react-bootstrap';
 import JumboRoundCard from '../JumboRoundCard';
-import LoadingIndicator from '../LoadingIndicator';
 import Button, { ButtonColor } from '../Button';
 import { useAccount } from 'wagmi';
 import { getFavoriteCommunities } from '../../hooks/useFavoriteCommunities';
@@ -15,6 +14,7 @@ import { isMobile } from 'web3modal';
 import { fetchRoundsForFilter } from '../../utils/fetchRoundsForFilter';
 import { ROUND_OVERRIDES } from '../../utils/roundOverrides';
 import { useFeaturedRounds } from '../../hooks/useFeaturedRounds';
+import JumboCardLoading from '../JumboCardLoading';
 
 const RoundsFeed: React.FC<{}> = () => {
   useAccount({
@@ -142,7 +142,17 @@ const RoundsFeed: React.FC<{}> = () => {
           <div>Your favorite communites haven't run any rounds yet... awkward.</div>
         </div>
       ) : fetchingRounds && rounds === undefined ? (
-        <LoadingIndicator />
+        <Row>
+          {Array(5)
+            .fill(0)
+            .map((_, i) => {
+              return (
+                <Col xl={12} key={i}>
+                  <JumboCardLoading />
+                </Col>
+              );
+            })}
+        </Row>
       ) : (
         <>
           <Row>

yarn.lock

@@ -17024,11 +17024,21 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.5.5.tgz#f375486d3f196e2a2527b503644693ae3a8670a9"
   integrity sha512-hvyIS71vs4Tu/yUYHPvGXsTgo0t3arU820+lT5VjZS2go0ewp2LqyCgxEN56CzOG7Iys52eRhHBiD1gGRdiQtw==
 
-[email protected], [email protected], graphql@^16.5.0, graphql@^16.6.0:
+[email protected]:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.0.tgz#39d19494dbe69d1ea719915b578bf920344a69d5"
+  integrity sha512-OmaM7y0kaK31NKG31q4YbD2beNYa6jBBKtMFT6gLYJljHLJr42IqJ8KX08u3Li/0ifzTU5HjmoOOrwa5BRLeDA==
+
+graphql@^16.5.0:
   version "16.5.0"
   resolved "https://registry.npmjs.org/graphql/-/graphql-16.5.0.tgz#41b5c1182eaac7f3d47164fb247f61e4dfb69c85"
   integrity sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA==
 
+graphql@^16.6.0:
+  version "16.8.1"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07"
+  integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -25142,6 +25152,11 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-loading-skeleton@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.3.1.tgz#cd6e3a626ee86c76a46c14e2379243f2f8834e1b"
+  integrity sha512-NilqqwMh2v9omN7LteiDloEVpFyMIa0VGqF+ukqp0ncVlYu1sKYbYGX9JEl+GtOT9TKsh04zCHAbavnQ2USldA==
+
 react-loading@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-2.0.3.tgz#e8138fb0c3e4674e481b320802ac7048ae14ffb9"