implement events loader (#132)

Author: vinaypuppal

components/events/event-card.js

@@ -97,11 +97,7 @@ export default props => (
           <Flex wrap>
             <Box fontSize={[12, 14, 16]} width={[1, 1, 0.38]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
               <TimeIcon className="icons" />
-              <span>
-                {props.tense === 'past'
-                  ? format(props.time, "ddd MMM Do 'YY")
-                  : format(props.time, "ddd MMM Do 'YY, h:mm A")}
-              </span>
+              <span>{format(props.time, "ddd MMM Do 'YY, h:mm A")}</span>
             </Box>
             <Box fontSize={[12, 14, 16]} width={[1, 1, 0.24]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
               <AttendeesIcon className="icons" />

components/events/event-content-loader.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex } from 'grid-emotion';
+
+import { breakpoints, graySecondary } from '../../utils/base.styles';
+
+const EventLoader = styled(Flex)`
+  ${space};
+  border: 1px solid ${graySecondary};
+  margin: 32px 0;
+  min-height: 120px;
+  ${breakpoints.md} {
+    padding-right: 15px;
+  }
+  ${breakpoints.sm} {
+    padding-right: 15px;
+  }
+  ${breakpoints.xs} {
+    padding-right: 15px;
+  }
+`;
+
+export default () => (
+  <EventLoader my={[3]} wrap>
+    <ContentLoader width="100%" speed={4} primaryColor={'#f3f3f3'} secondaryColor={'#ecebeb'}>
+      <rect x="0" y="0" rx="5" ry="5" width="200" height="132" />
+      <rect x="207" y="7" rx="4" ry="4" width="550" height="20" />
+      <rect x="210" y="54" rx="4" ry="4" width="300" height="15" />
+      <rect x="210" y="100" rx="4" ry="4" width="120" height="15" />
+      <rect x="355" y="100" rx="4" ry="4" width="120" height="15" />
+      <rect x="503" y="100" rx="4" ry="4" width="120" height="15" />
+      <rect x="636" y="74" rx="4" ry="4" width="120" height="40" />
+    </ContentLoader>
+  </EventLoader>
+);

package.json

@@ -5,8 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "xo && jest",
-    "lint":
-      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
+    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
@@ -18,19 +17,32 @@
   },
   "xo": {
     "parser": "babel-eslint",
-    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
-    "env": ["browser", "node"],
+    "extends": [
+      "prettier",
+      "prettier/react",
+      "plugin:react/recommended"
+    ],
+    "env": [
+      "browser",
+      "node"
+    ],
     "rules": {
       "linebreak-style": 0,
       "react/display-name": 0,
       "react/prop-types": 0
     },
     "space:": 2,
-    "ignores": ["next.config.js"],
+    "ignores": [
+      "next.config.js"
+    ],
     "overrides": [
       {
         "files": "**/__tests__/*.test.js",
-        "globals": ["describe", "it", "expect"]
+        "globals": [
+          "describe",
+          "it",
+          "expect"
+        ]
       }
     ]
   },
@@ -41,8 +53,16 @@
       "jest --findRelatedTests",
       "git add"
     ],
-    "**/*.md": ["prettier", "markdownlint", "git add"],
-    ".github/CONTRIBUTING.md": ["doctoc", "prettier", "git add"]
+    "**/*.md": [
+      "prettier",
+      "markdownlint",
+      "git add"
+    ],
+    ".github/CONTRIBUTING.md": [
+      "doctoc",
+      "prettier",
+      "git add"
+    ]
   },
   "dependencies": {
     "babel-plugin-emotion": "^8.0.10",
@@ -62,6 +82,7 @@
     "preact-emotion": "^8.0.10",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
+    "react-content-loader": "^1.7.1",
     "react-dom": "^16.0.0",
     "react-emotion": "^8.0.10",
     "react-event-timeline": "^1.4.0",

pages/events.js

@@ -9,6 +9,7 @@ import BannerSection from '../components/common/banner';
 import { Container, SubTitle, Button } from '../utils/base.styles';
 import { baseEventsURL, futureEventsURL, pastEventsURL, imagePlaceholderURL } from '../utils/urls';
 import EventCard from '../components/events/event-card';
+import EventLoader from '../components/events/event-content-loader';
 
 const EventsSection = styled.section`
   ${space};
@@ -70,11 +71,9 @@ export default class Events extends React.Component {
 
   renderEvents(events, loadLimit) {
     if (this.state.loading) {
-      return (
-        <SubTitle inverted color="#222">
-          Loading..
-        </SubTitle>
-      );
+      return [1, 2].map(i => {
+        return <EventLoader key={i} />;
+      });
     } else if (events.length === 0) {
       return (
         <SubTitle inverted color="#222">
@@ -132,6 +131,7 @@ export default class Events extends React.Component {
   }
 
   render() {
+    const { loading } = this.state;
     return (
       <Layout>
         <BannerSection title="Online & Offline Events" subTitle="Because you cannot change the world alone" />
@@ -143,7 +143,8 @@ export default class Events extends React.Component {
                   Upcoming Events
                 </h3>
                 {this.renderEvents(this.state.futureEvents, this.state.futureEventsLoadLimit)}
-                {this.renderLoadMoreButton(this.state.futureEvents.length, this.state.futureEventsLoadLimit, false)}
+                {!loading &&
+                  this.renderLoadMoreButton(this.state.futureEvents.length, this.state.futureEventsLoadLimit, false)}
               </Box>
             </Flex>
             <Flex direction="column" align="center" justify="center">
@@ -152,7 +153,8 @@ export default class Events extends React.Component {
                   Recent Events
                 </h3>
                 {this.renderEvents(this.state.pastEvents, this.state.pastEventsLoadLimit)}
-                {this.renderLoadMoreButton(this.state.pastEvents.length, this.state.pastEventsLoadLimit, true)}
+                {!loading &&
+                  this.renderLoadMoreButton(this.state.pastEvents.length, this.state.pastEventsLoadLimit, true)}
               </Box>
             </Flex>
           </Container>

yarn.lock

@@ -1046,7 +1046,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -5834,6 +5834,12 @@ rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-content-loader@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-1.7.1.tgz#e6e18adbf632829fd56ba6fe558d16d2a5a00af9"
+  dependencies:
+    babel-runtime "^6.6.1"
+
 react-deep-force-update@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"