Add a RefreshIndicator component

src/public/js/components/buttons/actions.js

@@ -2,6 +2,8 @@ import React from "react"
 
 import { MenuItem } from "react-bootstrap"
 
+import RefreshIndicator from "./refresh"
+
 export class WishlistButton extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -71,16 +73,7 @@ export class RefreshButton extends React.PureComponent {
   render() {
     return (
       <MenuItem onClick={this.handleClick}>
-        {this.props.fetching ||
+        <RefreshIndicator refresh={this.props.fetching} />
-          <span>
-            <i className="fa fa-refresh"></i> Refresh
-          </span>
-        }
-        {this.props.fetching &&
-            <span>
-              <i className="fa fa-spin fa-refresh"></i> Refreshing
-            </span>
-        }
       </MenuItem>
     );
   }

src/public/js/components/buttons/refresh.js

@@ -0,0 +1,18 @@
+import React from "react"
+
+export default function RefreshIndicator(props) {
+  if (!props.refresh) {
+    return (
+      <span>
+        <i className="fa fa-refresh"></i> Refresh
+      </span>
+    );
+  } else {
+    return (
+      <span>
+        <i className="fa fa-spin fa-refresh"></i> Refreshing
+      </span>
+    );
+  }
+}
+

src/public/js/components/buttons/subtitles.js

@@ -2,6 +2,8 @@ import React from "react"
 
 import { DropdownButton, MenuItem } from "react-bootstrap"
 
+import RefreshIndicator from "./refresh"
+
 export default class SubtitlesButton extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -34,18 +36,7 @@ export default class SubtitlesButton extends React.PureComponent {
             case "action":
               return (
                 <MenuItem key={index} onClick={(event) => this.handleClick(event, e.url)}>
-                  {this.props.fetching ||
+                  <RefreshIndicator refresh={this.props.fetching} />
-                      <span>
-                        <i className="fa fa-refresh">
-                        </i> Refresh
-                      </span>
-                  }
-                  {this.props.fetching &&
-                      <span>
-                        <i className="fa fa-spin fa-refresh">
-                        </i> Refreshing
-                      </span>
-                  }
                 </MenuItem>
               );
             case "divider":

src/public/js/components/shows/details.js

@@ -9,7 +9,7 @@ import Loader from "../loader/loader"
 import DownloadButton from "../buttons/download"
 import SubtitlesButton from "../buttons/subtitles"
 import ImdbButton from "../buttons/imdb"
-
+import RefreshIndicator from "../buttons/refresh"
 
 import { OverlayTrigger, Tooltip } from "react-bootstrap"
 
@@ -349,16 +349,7 @@ class GetDetailsButton extends React.PureComponent {
   render() {
     return (
       <a type="button" className="btn btn-xs btn-info" onClick={(e) => this.handleClick(e)}>
-        {this.props.data.get("fetching") ||
+        <RefreshIndicator refresh={this.props.data.get("fetching")} />
-            <span>
-              <i className="fa fa-refresh"></i> Refresh
-            </span>
-        }
-        {this.props.data.get("fetching") &&
-            <span>
-              <i className="fa fa-spin fa-refresh"></i> Refreshing
-            </span>
-        }
       </a>
     );
   }