From c2eafad82bd38fca561362f8e95ce724a690af4b Mon Sep 17 00:00:00 2001
From: Kevin Qi <kqi@patientslikeme.com>
Date: Tue, 31 May 2016 15:51:43 -0400
Subject: [PATCH] Attempt to fix issue where animation isn't happening upon
 initial mount

---
 demo/demo.jsx | 9 +++++++--
 src/index.jsx | 8 +++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/demo/demo.jsx b/demo/demo.jsx
index 72afa5d..f5a2249 100644
--- a/demo/demo.jsx
+++ b/demo/demo.jsx
@@ -12,7 +12,7 @@ const Config = ({ name, example, description, children }) => (
       <p><code>{name}</code><small className="text-muted m-l-1">{example ? `e.g. ${example}` : null}</small></p>
       <p>{description}</p>
       <div className="row">
-        <div className="col-xs-6 offset-xs-3">
+        <div className="col-xs-4 offset-xs-4">
           {children}
         </div>
       </div>
@@ -124,7 +124,12 @@ class Demo extends React.Component {
           name="initialAnimation"
           example="false"
           description="Toggle whether to animate progress starting from 0% on initial mount."
-        />
+        >
+          <CircularProgressbar
+            percentage={50}
+            initialAnimation={true}
+          />
+        </Config>
         <Config
           name="classForPercentage"
           example="(pct) => pct < 100 ? 'incomplete' : 'complete'"
diff --git a/src/index.jsx b/src/index.jsx
index 2f666e5..da05722 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -12,10 +12,12 @@ class CircularProgressbar extends React.Component {
   componentDidMount() {
     if (this.props.initialAnimation) {
       setTimeout(() => {
-        this.setState({
-          percentage: this.props.percentage,
+        window.requestAnimationFrame(() => {
+          this.setState({
+            percentage: this.props.percentage,
+          });
         });
-      }, 10);
+      }, 0);
     }
   }