Add proposing skeleton (#69)

packages/DApp/src/components/Button.tsx

@@ -22,8 +22,9 @@ export const ButtonPrimary = styled(Button)`
   }
 
   &:disabled {
-    background: ${Colors.GrayDisabledDark};
+    background: ${Colors.GrayDisabledLight};
     color: ${Colors.GreyTextDisabled};
+    filter: grayscale(1);
   }
 `
 export const ButtonSecondary = styled(Button)`

packages/DApp/src/components/Card.tsx

@@ -223,7 +223,7 @@ export const CardVoteWrap = styled.div`
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 6px 0px 0px 6px;
 `
-const CardInfoBlock = styled.div`
+export const CardInfoBlock = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

packages/DApp/src/components/card/ProposeModal.tsx

@@ -12,6 +12,7 @@ import { useContractFunction } from '@usedapp/core'
 
 import { useContracts } from '../../hooks/useContracts'
 import { CommunityDetail } from '../../models/community'
+import { CommunitySkeleton } from '../skeleton/CommunitySkeleton'
 
 interface ProposeModalProps {
   availableAmount: number
@@ -26,7 +27,7 @@ export function ProposeModal({
   setCommunityFound,
   communityFound,
 }: ProposeModalProps) {
-  const [proposingAmount, setProposingAmount] = useState(availableAmount)
+  const [proposingAmount, setProposingAmount] = useState(0)
   const [publicKey, setPublicKey] = useState('')
   const [loading, setLoading] = useState(false)
   const disabled = proposingAmount === 0
@@ -58,7 +59,7 @@ export function ProposeModal({
       </CommunityKeyLabel>
 
       {publicKey && communityFound && (
-        <div>
+        <ProposingData>
           <CardCommunity community={communityFound} />
           {communityFound.validForAddition ? (
             <VoteProposeWrap>
@@ -77,16 +78,30 @@ export function ProposeModal({
               />
             </WarningWrap>
           )}
-        </div>
+        </ProposingData>
       )}
 
-      {!communityFound && (
+      {!communityFound && !publicKey && (
         <ProposingInfo>
           <span>ℹ️</span>
           <InfoText>To propose a community, it must have at least 42 members and have a ENS domain.</InfoText>
         </ProposingInfo>
       )}
-      {loading && publicKey && <div>LOADING</div>}
+
+      {loading && publicKey && (
+        <ProposingData>
+          <CommunitySkeleton />
+          <VoteProposeWrap>
+            <VotePropose
+              availableAmount={availableAmount}
+              setProposingAmount={setProposingAmount}
+              proposingAmount={proposingAmount}
+              disabled={disabled}
+            />
+          </VoteProposeWrap>
+        </ProposingData>
+      )}
+
       {communityFound && !communityFound.validForAddition ? (
         <ConfirmBtn
           onClick={() => {
@@ -98,7 +113,7 @@ export function ProposeModal({
         </ConfirmBtn>
       ) : (
         <ProposingBtn
-          disabled={!communityFound}
+          disabled={!communityFound || disabled}
           onClick={() => {
             send(1, publicKey)
             setShowConfirmModal(true)
@@ -134,6 +149,10 @@ const VoteProposeWrap = styled.div`
   margin-top: 32px;
 `
 
+const ProposingData = styled.div`
+  width: 100%;
+`
+
 const ProposingInfo = styled.div`
   display: flex;
   justify-content: space-between;

packages/DApp/src/components/directory/DirectoryCardSkeleton.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Card, CardVoteBlock, CardVoteWrap } from '../Card'
+import { Card, CardCommunityWrap, CardVoteBlock, CardVoteWrap } from '../Card'
 import { CommunitySkeleton } from '../skeleton/CommunitySkeleton'
 import { Skeleton } from '../skeleton/Skeleton'
 
 export const DirectoryCardSkeleton = () => {
   return (
     <Card>
-      <CommunitySkeleton />
+      <CardCommunityWrap>
+        <CommunitySkeleton />
+      </CardCommunityWrap>
       <CardVoteWrap>
         <CardVoteBlock>
           <CardHeader>

packages/DApp/src/components/skeleton/CommunitySkeleton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { CardCommunityWrap, CardLinks } from '../Card'
+import { CardInfoBlock, CardLinks } from '../Card'
 import { LinkExternal, LinkInternal } from '../Link'
 import { Skeleton } from '../skeleton/Skeleton'
 import { TagsSkeletonList } from '../skeleton/TagSkeleton'
@@ -8,7 +8,8 @@ import { TextBlock } from '../skeleton/TextSkeleton'
 
 export const CommunitySkeleton = () => {
   return (
-    <CardCommunityWrap>
+    <CardInfoBlock>
+      {' '}
       <CardRow>
         <AvatarSkeleton />
         <CardContent>
@@ -22,12 +23,13 @@ export const CommunitySkeleton = () => {
         <StyledExternalLink>Etherscan</StyledExternalLink>
         <StyledInternalink>Voting history </StyledInternalink>
       </CardLinks>
-    </CardCommunityWrap>
+    </CardInfoBlock>
   )
 }
 
 const CardRow = styled.div`
   display: flex;
+  width: 100%;
   margin-bottom: 48px;
 `
 

packages/DApp/src/components/votes/VotingCardSkeleton.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Card, CardVoteBlock, CardVoteWrap } from '../Card'
+import { Card, CardCommunityWrap, CardVoteBlock, CardVoteWrap } from '../Card'
 import { CommunitySkeleton } from '../skeleton/CommunitySkeleton'
 import { Skeleton } from '../skeleton/Skeleton'
 
 export const VotingCardSkeleton = () => {
   return (
     <Card>
-      <CommunitySkeleton />
+      <CardCommunityWrap>
+        <CommunitySkeleton />
+      </CardCommunityWrap>
+
       <CardVoteWrap>
         <CardVoteBlock>
           <CardHeader>