From 063268124205e08b188d81432bca65836e0d970b Mon Sep 17 00:00:00 2001
From: Josephus Paye II <j.paye96@gmail.com>
Date: Wed, 20 Feb 2019 16:49:15 +1100
Subject: [PATCH 1/2] Add LoadingIcon with stories

---
 .../stories/loading_icon.stories.tsx          | 12 +++++++
 src/client/components/loading_icon/style.css  | 29 +++++++++++++++++
 src/client/components/loading_icon/view.tsx   | 32 +++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 src/client/components/loading_icon/stories/loading_icon.stories.tsx
 create mode 100644 src/client/components/loading_icon/style.css
 create mode 100644 src/client/components/loading_icon/view.tsx

diff --git a/src/client/components/loading_icon/stories/loading_icon.stories.tsx b/src/client/components/loading_icon/stories/loading_icon.stories.tsx
new file mode 100644
index 00000000..ba0318c5
--- /dev/null
+++ b/src/client/components/loading_icon/stories/loading_icon.stories.tsx
@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+
+import { LoadingIcon } from '../view'
+
+storiesOf('components.loading_icon', module)
+  .add('renders animated', () => {
+    return <LoadingIcon />
+  })
+  .add('renders with custom size', () => {
+    return <LoadingIcon size={64} />
+  })
diff --git a/src/client/components/loading_icon/style.css b/src/client/components/loading_icon/style.css
new file mode 100644
index 00000000..4efbdd10
--- /dev/null
+++ b/src/client/components/loading_icon/style.css
@@ -0,0 +1,29 @@
+.loading {
+  position: relative;
+}
+
+.loading svg {
+  animation: loading-rotate 0.7s linear infinite;
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform-origin: center center;
+  width: 100%;
+}
+
+.loading circle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: -35px;
+  stroke-linecap: round;
+  stroke: #1197d3;
+}
+
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/client/components/loading_icon/view.tsx b/src/client/components/loading_icon/view.tsx
new file mode 100644
index 00000000..8b5064e1
--- /dev/null
+++ b/src/client/components/loading_icon/view.tsx
@@ -0,0 +1,32 @@
+import * as classNames from 'classnames'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import * as style from './style.css'
+
+export interface LoadingIconProps {
+  className?: string
+  size?: number
+}
+
+@observer
+export class LoadingIcon extends React.Component<LoadingIconProps> {
+  render() {
+    const { className, size = 32 } = this.props
+    return <div
+      className={classNames([style.loading, className])}
+      style={{ width: `${size}px`, height: `${size}px` }}
+    >
+      <svg role='progressbar' viewBox='25 25 50 50'>
+        <circle
+          cx='50'
+          cy='50'
+          fill='none'
+          r='20'
+          strokeMiterlimit='10'
+          strokeWidth='4'
+        ></circle>
+      </svg>
+    </div>
+  }
+}

From fc74baa49683c5db56dcf4d046632a4a0030487e Mon Sep 17 00:00:00 2001
From: Brendan Annable <brendan@annable.me>
Date: Sat, 2 Mar 2019 12:24:53 +1100
Subject: [PATCH 2/2] PR feedback

---
 src/client/components/loading_icon/style.css  | 29 --------------
 src/client/components/loading_icon/styles.css | 16 ++++++++
 src/client/components/loading_icon/view.tsx   | 40 +++++++------------
 3 files changed, 30 insertions(+), 55 deletions(-)
 delete mode 100644 src/client/components/loading_icon/style.css
 create mode 100644 src/client/components/loading_icon/styles.css

diff --git a/src/client/components/loading_icon/style.css b/src/client/components/loading_icon/style.css
deleted file mode 100644
index 4efbdd10..00000000
--- a/src/client/components/loading_icon/style.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.loading {
-  position: relative;
-}
-
-.loading svg {
-  animation: loading-rotate 0.7s linear infinite;
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform-origin: center center;
-  width: 100%;
-}
-
-.loading circle {
-  stroke-dasharray: 89, 200;
-  stroke-dashoffset: -35px;
-  stroke-linecap: round;
-  stroke: #1197d3;
-}
-
-@keyframes loading-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/client/components/loading_icon/styles.css b/src/client/components/loading_icon/styles.css
new file mode 100644
index 00000000..c9d24d8f
--- /dev/null
+++ b/src/client/components/loading_icon/styles.css
@@ -0,0 +1,16 @@
+.loading {
+  animation: rotationAnimation 0.7s linear infinite;
+}
+
+.circle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: -35px;
+  stroke-linecap: round;
+  stroke: #1197d3;
+}
+
+@keyframes rotationAnimation {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/client/components/loading_icon/view.tsx b/src/client/components/loading_icon/view.tsx
index 8b5064e1..8de19161 100644
--- a/src/client/components/loading_icon/view.tsx
+++ b/src/client/components/loading_icon/view.tsx
@@ -1,32 +1,20 @@
-import * as classNames from 'classnames'
-import { observer } from 'mobx-react'
 import * as React from 'react'
 
-import * as style from './style.css'
+import * as styles from './styles.css'
 
-export interface LoadingIconProps {
-  className?: string
-  size?: number
-}
-
-@observer
-export class LoadingIcon extends React.Component<LoadingIconProps> {
+export class LoadingIcon extends React.PureComponent<{ size?: number }> {
   render() {
-    const { className, size = 32 } = this.props
-    return <div
-      className={classNames([style.loading, className])}
-      style={{ width: `${size}px`, height: `${size}px` }}
-    >
-      <svg role='progressbar' viewBox='25 25 50 50'>
-        <circle
-          cx='50'
-          cy='50'
-          fill='none'
-          r='20'
-          strokeMiterlimit='10'
-          strokeWidth='4'
-        ></circle>
-      </svg>
-    </div>
+    const { size = 32 } = this.props
+    return <svg width={size} height={size} className={styles.loading} role='progressbar' viewBox='25 25 50 50'>
+      <circle
+        className={styles.circle}
+        cx='50'
+        cy='50'
+        fill='none'
+        r='20'
+        strokeMiterlimit='10'
+        strokeWidth='4'
+      />
+    </svg>
   }
 }