style(icon loading): add to communities icons

Author: mydearxym

components/LoadingEffects/CommunityHolder.js

@@ -5,6 +5,7 @@ import R from 'ramda'
 import {
   BannerWrapper,
   BannerText,
+  CommunitiesText,
   SidebarText,
 } from './styles/community_holder'
 
@@ -13,6 +14,9 @@ const CommunityHolder = ({ place, text }) => {
     case 'sidebar': {
       return <SidebarText>{R.toUpper(text.slice(0, 1))}</SidebarText>
     }
+    case 'communities': {
+      return <CommunitiesText>{R.toUpper(text.slice(0, 2))}</CommunitiesText>
+    }
     default: {
       return (
         <BannerWrapper>
@@ -25,7 +29,7 @@ const CommunityHolder = ({ place, text }) => {
 
 CommunityHolder.propTypes = {
   text: PropTypes.string.isRequired,
-  place: PropTypes.oneOf(['banner', 'sidebar']),
+  place: PropTypes.oneOf(['banner', 'sidebar', 'communities']),
 }
 
 CommunityHolder.defaultProps = {

components/LoadingEffects/styles/community_holder.js

@@ -13,13 +13,23 @@ export const BannerWrapper = styled.div`
   border-color: ${theme('banner.desc')};
   color: ${theme('banner.desc')};
 `
-
 export const SidebarText = styled.div`
   color: ${theme('sidebar.holder')};
   text-align: center;
   margin-left: 5px;
 `
-
+export const CommunitiesText = styled.div`
+  ${cs.flex('align-center')};
+  color: ${theme('banner.desc')};
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 4px;
+  border-style: double;
+  border-color: ${theme('banner.desc')};
+  text-align: center;
+  margin-top: -40px;
+`
 export const BannerText = styled.div`
   ${cs.truncate('45px')};
   text-align: center;

containers/CommunitiesContent/CommunityCards.js

@@ -3,7 +3,7 @@ import R from 'ramda'
 
 // import { ICON_CMD } from '../../config'
 // import { Wrapper } from './styles'
-import { TrendLine } from '../../components'
+import { TrendLine, CommunityHolder } from '../../components'
 import SubscribeBtn from './SubscribeBtn'
 
 import {
@@ -30,6 +30,7 @@ const CommunityCard = ({ community, restProps }) => (
     <CommunityIcon
       nonFill={R.contains(community.raw, NON_FILL_COMMUNITY)}
       src={community.logo}
+      loading={<CommunityHolder text={community.raw} place="communities" />}
     />
     <CardTitle>{community.title}</CardTitle>
     <CardDesc>{community.desc}</CardDesc>