Improve UI notices for artist & album details

Closes #4368

frontend/src/Album/Details/AlbumDetails.js

@@ -9,6 +9,7 @@ import EditAlbumModalConnector from 'Album/Edit/EditAlbumModalConnector';
 import AlbumInteractiveSearchModalConnector from 'Album/Search/AlbumInteractiveSearchModalConnector';
 import ArtistGenres from 'Artist/Details/ArtistGenres';
 import ArtistHistoryModal from 'Artist/History/ArtistHistoryModal';
+import Alert from 'Components/Alert';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -531,23 +532,24 @@ class AlbumDetails extends Component {
             }
 
             {
-              !isFetching && albumsError &&
-                <div>
-                  {translate('LoadingAlbumsFailed')}
-                </div>
+              !isFetching && albumsError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('AlbumsLoadError')}
+                </Alert> :
+                null
             }
 
             {
-              !isFetching && trackFilesError &&
-                <div>
-                  {translate('LoadingTrackFilesFailed')}
-                </div>
+              !isFetching && trackFilesError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('TrackFilesLoadError')}
+                </Alert> :
+                null
             }
 
             {
               isPopulated && !!media.length &&
                 <div>
-
                   {
                     media.slice(0).map((medium) => {
                       return (

frontend/src/Artist/Details/ArtistDetails.js

@@ -8,6 +8,7 @@ import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector';
 import ArtistHistoryModal from 'Artist/History/ArtistHistoryModal';
 import MonitoringOptionsModal from 'Artist/MonitoringOptions/MonitoringOptionsModal';
 import ArtistInteractiveSearchModalConnector from 'Artist/Search/ArtistInteractiveSearchModalConnector';
+import Alert from 'Components/Alert';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -611,17 +612,19 @@ class ArtistDetails extends Component {
             }
 
             {
-              !isFetching && albumsError &&
-                <div>
-                  {translate('LoadingAlbumsFailed')}
-                </div>
+              !isFetching && albumsError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('AlbumsLoadError')}
+                </Alert> :
+                null
             }
 
             {
-              !isFetching && trackFilesError &&
-                <div>
-                  {translate('LoadingTrackFilesFailed')}
-                </div>
+              !isFetching && trackFilesError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('TrackFilesLoadError')}
+                </Alert> :
+                null
             }
 
             {

src/NzbDrone.Core/Localization/Core/en.json

@@ -572,8 +572,6 @@
   "ListRefreshInterval": "List Refresh Interval",
   "ListWillRefreshEveryInterp": "List will refresh every {0}",
   "Loading": "loading",
-  "LoadingAlbumsFailed": "Loading albums failed",
-  "LoadingTrackFilesFailed": "Loading track files failed",
   "Local": "Local",
   "LocalPath": "Local Path",
   "LocalPathHelpText": "Path that {appName} should use to access the remote path locally",
@@ -1064,6 +1062,7 @@
   "TrackFileCounttotalTrackCountTracksDownloadedInterp": "{0}/{1} tracks downloaded",
   "TrackFiles": "Track Files",
   "TrackFilesCountMessage": "No track files",
+  "TrackFilesLoadError": "Unable to load track files",
   "TrackImported": "Track Imported",
   "TrackMissingFromDisk": "Track missing from disk",
   "TrackNaming": "Track Naming",