├── LICENSE
├── README.md
├── components
    ├── index.js
    └── message.js
├── index.html
├── package.json
└── react
    ├── react-dom.js
    └── react.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Matthew Roach
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-placeholder
2 | 
3 | For more details read my blog post about this: [React Placeholder loading state](http://matthewroach.me/react-placeholder-loading-state/)
4 | 


--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var Message = React.createClass({
 3 | 	render: function() {
 4 | 		return (
 5 | 			<div className="message">
 6 | 				<p className="message-title">{this.props.title}</p>
 7 | 				<p className="message-date">{this.props.created}</p>
 8 | 			</div>
 9 | 		)
10 | 	}
11 | });
12 | 
13 | var Messages = React.createClass({
14 | 	getInitialState: function() {
15 | 		return {
16 | 			loading: true,
17 | 			data: [
18 | 				{
19 | 					title: '',
20 | 					created: '',
21 | 				},
22 | 				{
23 | 					title: '',
24 | 					created: '',
25 | 				}
26 | 			]
27 | 		};
28 | 	},
29 | 
30 | 	renderMessages() {
31 | 		return this.state.data.map( (message, index) => {
32 | 			return (
33 | 				<Message {...message} key={index} />
34 | 			);
35 | 		});
36 | 	},
37 | 
38 | 	loading() {
39 | 		return this.state.loading ? 'placeholder' : '';
40 | 	},
41 | 
42 | 	componentDidMount() {
43 | 		var self = this;
44 | 		setTimeout(function() {
45 | 			self.setState({
46 | 				loading: false,
47 | 				data: [
48 | 					{
49 | 						title: 'System maintenance between 8am and 9am on Monday 4 October',
50 | 						created: '9/25/2016',
51 | 					},
52 | 					{
53 | 						title: 'September expenses are now due!',
54 | 						created: '9/24/2016',
55 | 					}
56 | 				]
57 | 			})
58 | 		}, 4000);
59 | 	},
60 | 
61 | 	render: function() {
62 | 		return (
63 | 			<div className={'messages ' + this.loading() }>
64 | 				<h1>Messages</h1>
65 | 				{this.renderMessages()}
66 | 			</div>
67 | 		);
68 | 	}
69 | });
70 | 
71 | ReactDOM.render(
72 | 	<div className="container">
73 | 		<Messages />
74 | 	</div>,
75 | 	document.getElementById('root')
76 | );
77 | 


--------------------------------------------------------------------------------
/components/message.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matthewroach/react-placeholder/92eac944f36e6b6f2534de65c272f4ca808e92ef/components/message.js


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<title>React Placeholder</title>
 6 | 		<script src="react/react.js"></script>
 7 | 		<script src="react/react-dom.js"></script>
 8 | 		<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
 9 | 
10 | 		<style>
11 | 			* {
12 | 				box-sizing: border-box;
13 | 			}
14 | 
15 | 			html,
16 | 			body {
17 | 				background: rgb(245, 245, 245);
18 | 				color: rgb(60, 60, 60);
19 | 				font-family: Arial;
20 | 				margin: 0;
21 | 				padding: 0;
22 | 			}
23 | 
24 | 			p {
25 | 				line-height: 1.5;
26 | 			}
27 | 
28 | 			h1 {
29 | 				text-align: center;
30 | 			}
31 | 
32 | 			.container {
33 | 				margin: 0 auto;
34 | 				width: 600px;
35 | 			}
36 | 
37 | 			.messages {
38 | 				background: rgb(245, 245, 245);
39 | 				padding: 1em 1em 1em 1em;
40 | 			}
41 | 
42 | 			.message {
43 | 				background: rgb(255, 255, 255);
44 | 				border: 1px solid rgb(200, 200, 200);
45 | 				display: inline-block;
46 | 				margin: 0 0 1em 0;
47 | 				padding: 1em 1em 1em 1em;
48 | 				width: 100%;
49 | 			}
50 | 
51 | 			.message-title,
52 | 			.message-date {
53 | 				float: left;
54 | 				margin: 0;
55 | 				padding: 0;
56 | 			}
57 | 
58 | 			.message-title {
59 | 				width: 85%;
60 | 			}
61 | 
62 | 			.message-date {
63 | 				font-style: italic;
64 | 				margin: 0 0 0 2%;
65 | 				width: 13%;
66 | 			}
67 | 
68 | 			.placeholder .message-title,
69 | 			.placeholder .message-date {
70 | 				animation: pulse 1s infinite;
71 | 				min-height: 1em;
72 | 				text-indent: -99999px;
73 | 			}
74 | 
75 | 			@keyframes pulse {
76 | 				0% {
77 | 					background-color: rgb(235, 235, 235);
78 | 				}
79 | 				50% {
80 | 					background-color: rgb(245, 245, 245);
81 | 				}
82 | 				100% {
83 | 					background-color: rgb(235, 235, 235);
84 | 				}
85 | 			}
86 | 		</style>
87 | 	</head>
88 | 	<body>
89 | 		<div id="root"></div>
90 | 		<script type="text/babel" src="components/index.js"></script>
91 | 	</body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-placeholder",
 3 |   "version": "0.1.0",
 4 |   "description": "A demo of a react placeholder content animation",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/matthewroach/react-placeholder.git"
12 |   },
13 |   "author": "Matthew Roach",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/matthewroach/react-placeholder/issues"
17 |   },
18 |   "homepage": "https://github.com/matthewroach/react-placeholder#readme"
19 | }
20 | 


--------------------------------------------------------------------------------
/react/react-dom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ReactDOM v15.3.2
 3 |  *
 4 |  * Copyright 2013-present, Facebook, Inc.
 5 |  * All rights reserved.
 6 |  *
 7 |  * This source code is licensed under the BSD-style license found in the
 8 |  * LICENSE file in the root directory of this source tree. An additional grant
 9 |  * of patent rights can be found in the PATENTS file in the same directory.
10 |  *
11 |  */
12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
13 | ;(function(f) {
14 |   // CommonJS
15 |   if (typeof exports === "object" && typeof module !== "undefined") {
16 |     module.exports = f(require('react'));
17 | 
18 |   // RequireJS
19 |   } else if (typeof define === "function" && define.amd) {
20 |     define(['react'], f);
21 | 
22 |   // <script>
23 |   } else {
24 |     var g;
25 |     if (typeof window !== "undefined") {
26 |       g = window;
27 |     } else if (typeof global !== "undefined") {
28 |       g = global;
29 |     } else if (typeof self !== "undefined") {
30 |       g = self;
31 |     } else {
32 |       // works providing we're not in "use strict";
33 |       // needed for Java 8 Nashorn
34 |       // see https://github.com/facebook/react/issues/3037
35 |       g = this;
36 |     }
37 |     g.ReactDOM = f(g.React);
38 |   }
39 | 
40 | })(function(React) {
41 |   return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
42 | });
43 | 


--------------------------------------------------------------------------------