From 994c0c694f0008d68db690c1ff864a4fb27fc3ff Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Sun, 17 Dec 2017 20:03:03 +0530
Subject: [PATCH] implement events loader

---
 components/events/event-card.js           |  6 +---
 components/events/event-content-loader.js | 37 +++++++++++++++++++++++
 package.json                              | 37 ++++++++++++++++++-----
 pages/events.js                           | 16 +++++-----
 yarn.lock                                 |  8 ++++-
 5 files changed, 83 insertions(+), 21 deletions(-)
 create mode 100644 components/events/event-content-loader.js

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 963dc009d..1a1ae38ab 100644
--- a/components/events/event-card.js
+++ b/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" />
diff --git a/components/events/event-content-loader.js b/components/events/event-content-loader.js
new file mode 100644
index 000000000..eb093df1e
--- /dev/null
+++ b/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>
+);
diff --git a/package.json b/package.json
index d04463cfa..d2b93f643 100644
--- a/package.json
+++ b/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",
diff --git a/pages/events.js b/pages/events.js
index 1e18cb4b0..77e2e965e 100644
--- a/pages/events.js
+++ b/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">
@@ -128,6 +127,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" />
@@ -139,7 +139,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">
@@ -148,7 +149,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>
diff --git a/yarn.lock b/yarn.lock
index 01a5b56c2..81c154b0b 100644
--- a/yarn.lock
+++ b/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"

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/132.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/132.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/132.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/132.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>