Add error handling on image loading for album covers & thumbnails

packages/ui/lib/components/ContextPopup/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { Popup, PopupProps } from 'semantic-ui-react';
+import Img from 'react-image';
+import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
 import styles from './styles.scss';
 
@@ -38,7 +40,10 @@ const ContextPopup: React.FC<ContextPopupProps> = ({
       <div className={styles.popup_header}>
         {thumb &&
         <div className={styles.popup_thumb}>
-          <img src={thumb} />
+          <Img 
+            src={thumb}
+            unloader={<img src={artPlaceholder}/>}
+            />
         </div>}
         <div className={styles.popup_info}>
           <div className={styles.popup_title}>

packages/ui/lib/components/Cover/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Img from 'react-image';
 import cx from 'classnames';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
@@ -15,7 +16,10 @@ const Cover: React.FC<CoverProps> = ({ cover = String(artPlaceholder) }) => (
     common.nuclear,
     styles.cover_container
   )}>
-    <img src={cover || String(artPlaceholder)} />
+    <Img 
+      src={cover || String(artPlaceholder)}
+      unloader={<img src={String(artPlaceholder)}/>} 
+     />
   </div>
 );
 

packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx

@@ -4,6 +4,8 @@ import cx from 'classnames';
 
 import { Track } from '../../../types';
 import styles from '../styles.scss';
+import Img from 'react-image';
+import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 
 export const ThumbnailCell: React.FC<CellProps<Track>> = ({
   cell,
@@ -12,5 +14,9 @@ export const ThumbnailCell: React.FC<CellProps<Track>> = ({
   className={cx(styles.grid_track_table_cell, styles.thumbnail_cell)}
   {...cell.getCellProps()}
 >
-  <img className={styles.thumbnail_cell_thumbnail} src={value} />
+  <Img 
+    className={styles.thumbnail_cell_thumbnail} 
+    src={value}
+    unloader={<img className={styles.thumbnail_cell_thumbnail} src={artPlaceholder}/>}
+    />
 </div>;

packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx

@@ -3,6 +3,7 @@ import { Icon } from 'semantic-ui-react';
 
 import styles from './styles.scss';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
+import Img from 'react-image';
 
 import { TrackInfoProps } from '../../TrackInfo';
 
@@ -19,7 +20,10 @@ const MiniTrackInfo: React.FC<MiniTrackInfoProps> = ({
 }) => (
     <div className={styles.mini_track_info}>
       <div className={styles.mini_cover}>
-        <img src={cover} />
+      <Img
+        src={cover}
+        unloader={<img src={artPlaceholder} />}
+        />
       </div>
       {
         hasTracks &&

packages/ui/lib/components/QueueItem/index.tsx

@@ -10,6 +10,8 @@ import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { getTrackArtist, getTrackTitle } from '../../utils';
 import { Track } from '../../types';
+import Img from 'react-image';
+
 
 export type QueueItemProps = {
   isCurrent: boolean;
@@ -46,7 +48,10 @@ export const QueueItem: React.FC<QueueItemProps> = ({
       <div className={styles.thumbnail}>
         {track.loading
           ? <Loader type='small' className={isCompact && styles.compact_loader} />
-          : <img src={track.thumbnail ?? artPlaceholder} />}
+          : <Img 
+              src={track.thumbnail ?? artPlaceholder}
+              unloader={<img src={artPlaceholder}/>}
+            />}
 
         <div
           data-testid='queue-item-remove'