LoadingIndicator no longer dynamically creates styled-components (#69)

react-boilerplate · Apr 11, 2020 · dac0207 · dac0207
1 parent 4edc607
commit dac0207
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 55 deletions.
diff --git a/app/components/LoadingIndicator/Circle.tsx b/app/components/LoadingIndicator/Circle.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import styled, { keyframes } from 'styles/styled-components';
 
+interface Props {
+  rotate?: number;
+  delay?: number;
+  id?: string;
+}
+
 const circleFadeDelay = keyframes`
   0%,
   39%,
@@ -13,40 +19,37 @@ const circleFadeDelay = keyframes`
   }
 `;
 
-interface Props {
-  rotate?: number;
-  delay?: number;
-  id?: string;
-}
-const Circle = (props: Props) => {
-  const CirclePrimitive = styled.div`
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    ${props.rotate &&
+const CirclePrimitive = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  ${(props: Props) =>
+    props.rotate &&
     `
       -webkit-transform: rotate(${props.rotate}deg);
       -ms-transform: rotate(${props.rotate}deg);
       transform: rotate(${props.rotate}deg);
     `} &:before {
-      content: '';
-      display: block;
-      margin: 0 auto;
-      width: 15%;
-      height: 15%;
-      background-color: #999;
-      border-radius: 100%;
-      animation: ${circleFadeDelay} 1.2s infinite ease-in-out both;
-      ${props.delay &&
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #999;
+    border-radius: 100%;
+    animation: ${circleFadeDelay} 1.2s infinite ease-in-out both;
+    ${(props: Props) =>
+      props.delay && // eslint-disable-line indent
       `
         -webkit-animation-delay: ${props.delay}s;
         animation-delay: ${props.delay}s;
       `};
-    }
-  `;
-  return <CirclePrimitive />;
-};
+  }
+`;
+const Circle = (props: Props) => (
+  <CirclePrimitive rotate={props.rotate} delay={props.delay} />
+);
 
 export default Circle;
diff --git a/app/components/LoadingIndicator/tests/__snapshots__/index.test.tsx.snap b/app/components/LoadingIndicator/tests/__snapshots__/index.test.tsx.snap
@@ -1,13 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LoadingIndicator /> should match the snapshot 1`] = `
-.c0 {
-  margin: 2em auto;
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
 .c1 {
   width: 100%;
   height: 100%;
@@ -336,6 +329,13 @@ exports[`<LoadingIndicator /> should match the snapshot 1`] = `
   animation-delay: -0.1s;
 }
 
+.c0 {
+  margin: 2em auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
 <div
   class="c0"
 >
@@ -344,36 +344,47 @@ exports[`<LoadingIndicator /> should match the snapshot 1`] = `
   />
   <div
     class="c2"
+    rotate="30"
   />
   <div
     class="c3"
+    rotate="60"
   />
   <div
     class="c4"
+    rotate="90"
   />
   <div
     class="c5"
+    rotate="120"
   />
   <div
     class="c6"
+    rotate="150"
   />
   <div
     class="c7"
+    rotate="180"
   />
   <div
     class="c8"
+    rotate="210"
   />
   <div
     class="c9"
+    rotate="240"
   />
   <div
     class="c10"
+    rotate="270"
   />
   <div
     class="c11"
+    rotate="300"
   />
   <div
     class="c12"
+    rotate="330"
   />
 </div>
 `;
diff --git a/app/components/ReposList/tests/__snapshots__/index.test.tsx.snap b/app/components/ReposList/tests/__snapshots__/index.test.tsx.snap
@@ -8,43 +8,54 @@ exports[`<ReposList /> should render the loading indicator when its loading 1`]
     class="sc-bdVaJa kjaCOS"
   >
     <div
-      class="sc-ifAKCX jcAqoe"
+      class="sc-EHOje gGoChr"
     >
       <div
-        class="sc-iwsKbI dPWiyi"
+        class="sc-ifAKCX edDXsf"
       />
       <div
-        class="sc-gZMcBi ebtRmY"
+        class="sc-ifAKCX dwBzUM"
+        rotate="30"
       />
       <div
-        class="sc-gqjmRU cTErFR"
+        class="sc-ifAKCX bwzsCI"
+        rotate="60"
       />
       <div
-        class="sc-VigVT dFmMlF"
+        class="sc-ifAKCX kauFWn"
+        rotate="90"
       />
       <div
-        class="sc-jTzLTM enuhco"
+        class="sc-ifAKCX bxtDgL"
+        rotate="120"
       />
       <div
-        class="sc-fjdhpX jNqnwR"
+        class="sc-ifAKCX QkOVc"
+        rotate="150"
       />
       <div
-        class="sc-jzJRlG fEFjAE"
+        class="sc-ifAKCX droLCd"
+        rotate="180"
       />
       <div
-        class="sc-cSHVUG Hyerz"
+        class="sc-ifAKCX ipLZRC"
+        rotate="210"
       />
       <div
-        class="sc-kAzzGY hOJQGd"
+        class="sc-ifAKCX hMBtdV"
+        rotate="240"
       />
       <div
-        class="sc-chPdSV kNRVZc"
+        class="sc-ifAKCX fNJWDf"
+        rotate="270"
       />
       <div
-        class="sc-kgoBCf jBYbkL"
+        class="sc-ifAKCX idkAbN"
+        rotate="300"
       />
       <div
-        class="sc-kGXeez klHZt"
+        class="sc-ifAKCX ilbcVg"
+        rotate="330"
       />
     </div>
   </ul>
@@ -65,22 +76,22 @@ exports[`<ReposList /> should render the repositories if loading was successful
         class="sc-htpNat cdjzok"
       >
         <div
-          class="sc-dnqmqq hIJpCG"
+          class="sc-iwsKbI jqiRxi"
         >
           <a
-            class="sc-bZQynM sc-htoDjs zeaOm"
+            class="sc-gzVnrw sc-dnqmqq cnWlmM"
             href="https://github.com/react-boilerplate/react-boilerplate"
             target="_blank"
           >
             react-boilerplate
           </a>
           <a
-            class="sc-bZQynM sc-gzVnrw XFJuy"
+            class="sc-gzVnrw sc-htoDjs eDvFek"
             href="https://github.com/react-boilerplate/react-boilerplate/issues"
             target="_blank"
           >
             <svg
-              class="sc-EHOje bDxpQi"
+              class="sc-bZQynM ijZVQR"
               height="1em"
               width="0.875em"
             >

diff --git a/app/containers/HomePage/tests/__snapshots__/index.test.tsx.snap b/app/containers/HomePage/tests/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<HomePage /> should render and match the snapshot 1`] = `
 <article>
   <div>
     <section
-      class="sc-gqjmRU sc-VigVT bCueft"
+      class="sc-VigVT sc-jTzLTM gPzZSo"
     >
       <h2
         class="sc-bdVaJa dAIgSr"
@@ -20,7 +20,7 @@ exports[`<HomePage /> should render and match the snapshot 1`] = `
       </p>
     </section>
     <section
-      class="sc-gqjmRU fgHQxZ"
+      class="sc-VigVT GwNEO"
     >
       <h2
         class="sc-bdVaJa dAIgSr"
@@ -30,7 +30,7 @@ exports[`<HomePage /> should render and match the snapshot 1`] = `
         </span>
       </h2>
       <form
-        class="sc-jTzLTM fzeZHJ"
+        class="sc-fjdhpX hPMBNF"
       >
         <label
           for="username"
@@ -39,14 +39,14 @@ exports[`<HomePage /> should render and match the snapshot 1`] = `
             Show Github repositories by
           </span>
           <span
-            class="sc-gZMcBi gIzYNa"
+            class="sc-gqjmRU eUVlDE"
           >
             <span>
               @
             </span>
           </span>
           <input
-            class="sc-fjdhpX bmAVzu"
+            class="sc-jzJRlG kiUvcq"
             id="username"
             placeholder="mxstbr"
             type="text"