update to photon loader

mozilla-services · Jun 24, 2017 · 8b6157b · 8b6157b
1 parent a1a0fa6
commit 8b6157b
Show file tree

Hide file tree

Showing 4 changed files with 879 additions and 28 deletions.
diff --git a/server/src/pages/creating/view.js b/server/src/pages/creating/view.js
@@ -19,8 +19,8 @@ class Body extends React.Component {
     return (
       <reactruntime.BodyTemplate {...this.props}>
         <div className="column-center full-height inverse-color-scheme">
-          <div className="spinner">
-            <img src={this.props.staticLink("/static/img/spinner.svg")} />
+          <div clasName="spinner-wrapper">
+            <div className="spinner" />
           </div>
         </div>
       </reactruntime.BodyTemplate>

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -63,9 +63,6 @@ class Clip extends React.Component {
   }
 
   renderLoader() {
-    if (!this.state.loading) {
-      return null;
-    }
     return (
       <div id="spinner" className="spinner">
         <img src = {this.props.staticLink("/static/img/spinner.svg")} />

diff --git a/static/css/partials/_animations.scss b/static/css/partials/_animations.scss
@@ -1,3 +1,25 @@
+.spinner {
+  animation: wobble 1.2s steps(60) infinite;
+  background: url("../images/loading.svg") no-repeat;
+  height: 60px;
+  opacity: .5;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  width: 217px;
+}
+
+.spinner-wrapper {
+  animation: fade-in 1s forwards;
+  animation-delay: 250ms;
+  opacity: 0;
+}
+
+@keyframes wobble {
+  100% {
+    background-position: -13020px 0;
+  }
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;