Misc UI Updates

frontend/src/Activity/History/History.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { align, icons } from 'Helpers/Props';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
@@ -17,6 +18,27 @@ import HistoryRowConnector from './HistoryRowConnector';
 
 class History extends Component {
 
+  //
+  // Lifecycle
+
+  shouldComponentUpdate(nextProps) {
+    // Don't update when fetching has completed if items have changed,
+    // before albums start fetching or when albums start fetching.
+
+    if (
+      (
+        this.props.isFetching &&
+        nextProps.isPopulated &&
+        hasDifferentItems(this.props.items, nextProps.items)
+      ) ||
+      (!this.props.isAlbumsFetching && nextProps.isAlbumsFetching)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
   //
   // Render
 

frontend/src/Activity/Queue/Queue.js

@@ -37,6 +37,24 @@ class Queue extends Component {
     };
   }
 
+  shouldComponentUpdate(nextProps) {
+    // Don't update when fetching has completed if items have changed,
+    // before albums start fetching or when albums start fetching.
+
+    if (
+      (
+        this.props.isFetching &&
+        nextProps.isPopulated &&
+        hasDifferentItems(this.props.items, nextProps.items)
+      ) ||
+      (!this.props.isAlbumsFetching && nextProps.isAlbumsFetching)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
   componentDidUpdate(prevProps) {
     if (hasDifferentItems(prevProps.items, this.props.items)) {
       this.setState({ selectedState: {} });

frontend/src/Artist/Details/ArtistDetails.css

@@ -95,6 +95,7 @@
   margin: 5px 10px 5px 0;
 }
 
+.path,
 .sizeOnDisk,
 .qualityProfileName,
 .links,
@@ -104,6 +105,12 @@
   font-size: 17px;
 }
 
+.path {
+  vertical-align: text-top;
+  font-size: $defaultFontSize;
+  font-family: $monoSpaceFontFamily;
+}
+
 .contentContainer {
   padding: 20px;
 }

frontend/src/Artist/Details/ArtistDetails.js

@@ -347,7 +347,6 @@ class ArtistDetails extends Component {
                 <div className={styles.detailsLabels}>
                   <Label
                     className={styles.detailsLabel}
-                    title={trackFilesCountMessage}
                     size={sizes.LARGE}
                   >
                     <Icon
@@ -355,7 +354,7 @@ class ArtistDetails extends Component {
                       size={17}
                     />
 
-                    <span className={styles.sizeOnDisk}>
+                    <span className={styles.path}>
                       {path}
                     </span>
                   </Label>

frontend/src/Artist/Details/ArtistDetailsConnector.js

@@ -56,6 +56,8 @@ function createMapStateToProps() {
       return {
         ...artist,
         alternateTitles,
+        isArtistRefreshing,
+        allArtistRefreshing,
         isRefreshing,
         isSearching,
         isRenamingFiles,
@@ -94,13 +96,15 @@ class ArtistDetailsConnector extends Component {
   componentDidUpdate(prevProps) {
     const {
       id,
-      isRefreshing,
+      isArtistRefreshing,
+      allArtistRefreshing,
       isRenamingFiles,
       isRenamingArtist
     } = this.props;
 
     if (
-      (prevProps.isRefreshing && !isRefreshing) ||
+      (prevProps.isArtistRefreshing && !isArtistRefreshing) ||
+      (prevProps.allArtistRefreshing && !allArtistRefreshing) ||
       (prevProps.isRenamingFiles && !isRenamingFiles) ||
       (prevProps.isRenamingArtist && !isRenamingArtist)
     ) {
@@ -172,6 +176,8 @@ class ArtistDetailsConnector extends Component {
 ArtistDetailsConnector.propTypes = {
   id: PropTypes.number.isRequired,
   nameSlug: PropTypes.string.isRequired,
+  isArtistRefreshing: PropTypes.bool.isRequired,
+  allArtistRefreshing: PropTypes.bool.isRequired,
   isRefreshing: PropTypes.bool.isRequired,
   isRenamingFiles: PropTypes.bool.isRequired,
   isRenamingArtist: PropTypes.bool.isRequired,

frontend/src/Components/SignalRConnector.js

@@ -90,6 +90,12 @@ class SignalRConnector extends Component {
   // Control
 
   retryConnection = () => {
+    if (this.retryInterval >= 30) {
+      this.setState({
+        isDisconnected: true
+      });
+    }
+
     this.retryTimeoutId = setTimeout(() => {
       this.signalRconnection.start(this.signalRconnectionOptions);
       this.retryInterval = Math.min(this.retryInterval + 5, 30);
@@ -328,8 +334,9 @@ class SignalRConnector extends Component {
 
     this.props.setAppValue({
       isConnected: false,
-      isReconnecting: true,
+      isReconnecting: true
-      isDisconnected: true
+      // Don't set isDisconnected yet, it'll be set it if it's disconnected
+      // for ~105 seconds (retry interval reaches 30 seconds)
     });
 
     this.retryConnection();