Fixed: Rendering Tweaks to UI

frontend/src/Artist/Index/ArtistIndexFooter.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import formatBytes from 'Utilities/Number/formatBytes';
 import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
@@ -7,141 +7,148 @@ import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import styles from './ArtistIndexFooter.css';
 
-function ArtistIndexFooter({ artist }) {
-  const count = artist.length;
-  let tracks = 0;
-  let trackFiles = 0;
-  let ended = 0;
-  let continuing = 0;
-  let monitored = 0;
-  let totalFileSize = 0;
-
-  artist.forEach((s) => {
-    const { statistics = {} } = s;
-
-    const {
-      trackCount = 0,
-      trackFileCount = 0,
-      sizeOnDisk = 0
-    } = statistics;
-
-    tracks += trackCount;
-    trackFiles += trackFileCount;
-
-    if (s.status === 'ended') {
-      ended++;
-    } else {
-      continuing++;
-    }
-
-    if (s.monitored) {
-      monitored++;
-    }
-
-    totalFileSize += sizeOnDisk;
-  });
-
-  return (
-    <ColorImpairedConsumer>
-      {(enableColorImpairedMode) => {
-        return (
-          <div className={styles.footer}>
-            <div>
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.continuing,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Continuing (All tracks downloaded)</div>
+class ArtistIndexFooter extends PureComponent {
+
+  //
+  // Render
+
+  render() {
+    const { artist } = this.props;
+    const count = artist.length;
+    let tracks = 0;
+    let trackFiles = 0;
+    let ended = 0;
+    let continuing = 0;
+    let monitored = 0;
+    let totalFileSize = 0;
+
+    artist.forEach((s) => {
+      const { statistics = {} } = s;
+
+      const {
+        trackCount = 0,
+        trackFileCount = 0,
+        sizeOnDisk = 0
+      } = statistics;
+
+      tracks += trackCount;
+      trackFiles += trackFileCount;
+
+      if (s.status === 'ended') {
+        ended++;
+      } else {
+        continuing++;
+      }
+
+      if (s.monitored) {
+        monitored++;
+      }
+
+      totalFileSize += sizeOnDisk;
+    });
+
+    return (
+      <ColorImpairedConsumer>
+        {(enableColorImpairedMode) => {
+          return (
+            <div className={styles.footer}>
+              <div>
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.continuing,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Continuing (All tracks downloaded)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.ended,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Ended (All tracks downloaded)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.missingMonitored,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Missing Tracks (Artist monitored)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.missingUnmonitored,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Missing Tracks (Artist not monitored)</div>
+                </div>
               </div>
 
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.ended,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Ended (All tracks downloaded)</div>
+              <div className={styles.statistics}>
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Artist"
+                    data={count}
+                  />
+
+                  <DescriptionListItem
+                    title="Ended"
+                    data={ended}
+                  />
+
+                  <DescriptionListItem
+                    title="Continuing"
+                    data={continuing}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Monitored"
+                    data={monitored}
+                  />
+
+                  <DescriptionListItem
+                    title="Unmonitored"
+                    data={count - monitored}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Tracks"
+                    data={tracks}
+                  />
+
+                  <DescriptionListItem
+                    title="Files"
+                    data={trackFiles}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Total File Size"
+                    data={formatBytes(totalFileSize)}
+                  />
+                </DescriptionList>
               </div>
-
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.missingMonitored,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Missing Tracks (Artist monitored)</div>
-              </div>
-
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.missingUnmonitored,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Missing Tracks (Artist not monitored)</div>
-              </div>
-            </div>
-
-            <div className={styles.statistics}>
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Artist"
-                  data={count}
-                />
-
-                <DescriptionListItem
-                  title="Ended"
-                  data={ended}
-                />
-
-                <DescriptionListItem
-                  title="Continuing"
-                  data={continuing}
-                />
-              </DescriptionList>
-
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Monitored"
-                  data={monitored}
-                />
-
-                <DescriptionListItem
-                  title="Unmonitored"
-                  data={count - monitored}
-                />
-              </DescriptionList>
-
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Tracks"
-                  data={tracks}
-                />
-
-                <DescriptionListItem
-                  title="Files"
-                  data={trackFiles}
-                />
-              </DescriptionList>
-
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Total File Size"
-                  data={formatBytes(totalFileSize)}
-                />
-              </DescriptionList>
             </div>
-          </div>
-        );
-      }}
-    </ColorImpairedConsumer>
-  );
+          );
+        }}
+      </ColorImpairedConsumer>
+    );
+  }
 }
 
 ArtistIndexFooter.propTypes = {

frontend/src/Components/Icon.js

@@ -1,49 +1,55 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { kinds } from 'Helpers/Props';
 import classNames from 'classnames';
 import styles from './Icon.css';
 
-function Icon(props) {
-  const {
-    containerClassName,
-    className,
-    name,
-    kind,
-    size,
-    title,
-    isSpinning,
-    ...otherProps
-  } = props;
+class Icon extends PureComponent {
 
-  const icon = (
-    <FontAwesomeIcon
-      className={classNames(
-        className,
-        styles[kind]
-      )}
-      icon={name}
-      spin={isSpinning}
-      style={{
-        fontSize: `${size}px`
-      }}
-      {...otherProps}
-    />
-  );
+  //
+  // Render
 
-  if (title) {
-    return (
-      <span
-        className={containerClassName}
-        title={title}
-      >
-        {icon}
-      </span>
+  render() {
+    const {
+      containerClassName,
+      className,
+      name,
+      kind,
+      size,
+      title,
+      isSpinning,
+      ...otherProps
+    } = this.props;
+
+    const icon = (
+      <FontAwesomeIcon
+        className={classNames(
+          className,
+          styles[kind]
+        )}
+        icon={name}
+        spin={isSpinning}
+        style={{
+          fontSize: `${size}px`
+        }}
+        {...otherProps}
+      />
     );
-  }
 
-  return icon;
+    if (title) {
+      return (
+        <span
+          className={containerClassName}
+          title={title}
+        >
+          {icon}
+        </span>
+      );
+    }
+
+    return icon;
+  }
 }
 
 Icon.propTypes = {

frontend/src/Components/Page/PageJumpBar.js

@@ -26,6 +26,13 @@ class PageJumpBar extends Component {
     this.computeVisibleItems();
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      nextProps.items !== this.props.items ||
+      nextState.height !== this.state.height
+    );
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (
       prevProps.items !== this.props.items ||