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 => (
-
- {props.tense === 'past'
- ? format(props.time, "ddd MMM Do 'YY")
- : format(props.time, "ddd MMM Do 'YY, h:mm A")}
-
+ {format(props.time, "ddd MMM Do 'YY, h:mm A")}
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 () => (
+
+
+
+
+
+
+
+
+
+
+
+);
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 f021f03ba..b92ad9438 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 (
-
- Loading..
-
- );
+ return [1, 2].map(i => {
+ return ;
+ });
} else if (events.length === 0) {
return (
@@ -132,6 +131,7 @@ export default class Events extends React.Component {
}
render() {
+ const { loading } = this.state;
return (
@@ -143,7 +143,8 @@ export default class Events extends React.Component {
Upcoming Events
{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)}
@@ -152,7 +153,8 @@ export default class Events extends React.Component {
Recent Events
{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)}
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"
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
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.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy