Add Loader + @client to React v0.14 example

ericclemmons · Jun 29, 2016 · 6f28ea6 · 6f28ea6
1 parent 385e08c
commit 6f28ea6
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/examples/react-v0.14/src/components/Loader.js b/examples/react-v0.14/src/components/Loader.js
@@ -0,0 +1,53 @@
+import React from "react";
+
+export default class Loader extends React.Component {
+  static displayName = "Loader"
+
+  render() {
+    return (
+      <div className="spinner">
+        <div className="bounce1" />
+        <div className="bounce2" />
+        <div className="bounce3" />
+
+        <style dangerouslySetInnerHTML={{ __html: `
+          .spinner {
+            margin: 4em auto 0;
+            width: 70px;
+            text-align: center;
+          }
+          .spinner > div {
+            width: 18px;
+            height: 18px;
+            background-color: #333;
+            border-radius: 100%;
+            display: inline-block;
+            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+          }
+          .spinner .bounce1 {
+            -webkit-animation-delay: -0.32s;
+            animation-delay: -0.32s;
+          }
+          .spinner .bounce2 {
+            -webkit-animation-delay: -0.16s;
+            animation-delay: -0.16s;
+          }
+          @-webkit-keyframes sk-bouncedelay {
+            0%, 80%, 100% { -webkit-transform: scale(0) }
+            40% { -webkit-transform: scale(1.0) }
+          }
+          @keyframes sk-bouncedelay {
+            0%, 80%, 100% {
+              -webkit-transform: scale(0);
+              transform: scale(0);
+            } 40% {
+              -webkit-transform: scale(1.0);
+              transform: scale(1.0);
+            }
+          }
+        ` }} />
+      </div>
+    );
+  }
+}
diff --git a/examples/react-v0.14/src/components/Stargazers.js b/examples/react-v0.14/src/components/Stargazers.js
@@ -1,8 +1,11 @@
 import axios from "axios";
 import React from "react";
-import { resolve } from "react-resolver";
+import { client, resolve } from "react-resolver";
 import { Link } from "react-router";
 
+import Loader from "./Loader";
+
+@client(Loader)
 @resolve("user", ({ location: { query }, params }) => params.user || query.user)
 @resolve("repo", ({ location: { query }, params }) => params.repo || query.repo)
 @resolve("users", function({ user, repo }) {