Moving loader to thumbnail so it doesn't block underlying render, mitigates impact of #837

src/js/components/GridItem.js

@@ -141,6 +141,7 @@ const GridItem = ({
           className="grid__item__thumbnail"
           images={item.images || item.icons}
           type={item.type}
+          loading={item.loading}
         />
         <div className="grid__item__name">
           {item.name

src/js/components/Thumbnail.js

@@ -1,9 +1,13 @@
 import React, { memo } from 'react';
 import Link from './Link';
 import Icon from './Icon';
+import Loader from './Loader';
 
 export default memo((props) => {
-  const { placeholder = true } = props;
+  const {
+    placeholder = true,
+    loading,
+  } = props;
   const mapImageSizes = () => {
     // Single image
     if (props.image) {
@@ -36,6 +40,7 @@ export default memo((props) => {
 
   const image = mapImageSizes();
   let class_name = 'thumbnail thumbnail--loaded';
+  if (loading) class_name += ' thumbnail--loading';
   if (props.fill) class_name += ' thumbnail--fill';
   if (props.size) class_name += ` thumbnail--${props.size}`;
   if (props.circle) class_name += ' thumbnail--circle';
@@ -79,6 +84,7 @@ export default memo((props) => {
           style={{ backgroundImage: `url("${image}")` }}
         />
       )}
+      <Loader loading={loading} />
       <div className="thumbnail__actions">
         {props.canZoom && image && (
           <Link

src/js/services/mopidy/middleware.js

@@ -1325,6 +1325,12 @@ const MopidyMiddleware = (function () {
                 });
                 playlist.tracks = injectSortId(formatTracks(tracks));
                 store.dispatch(coreActions.itemLoaded(playlist));
+              })
+              .catch(() => {
+                store.dispatch(coreActions.itemLoaded({
+                  uri: playlist.uri,
+                  loading: undefined,
+                }));
               });
           } else {
             store.dispatch(coreActions.itemLoaded(playlist));

src/js/views/Album.js

@@ -78,7 +78,7 @@ const Album = () => {
     }
   }, [album]);
 
-  if (album?.loading) {
+  if (!album?.name && album?.loading) {
     return <Loader body loading />;
   }
 
@@ -135,7 +135,14 @@ const Album = () => {
   return (
     <div className="view album-view content-wrapper preserve-3d">
       <div className="thumbnail-wrapper">
-        <Thumbnail size="large" glow canZoom images={album.images} type="album" />
+        <Thumbnail
+          size="large"
+          images={album.images}
+          type="album"
+          loading={album.loading}
+          canZoom
+          glow
+        />
       </div>
 
       <div className="title">

src/js/views/Artist/Artist.js

@@ -90,7 +90,7 @@ const Artist = () => {
     }),
   );
 
-  if (loading) {
+  if (!artist?.name && loading) {
     return <Loader body loading />;
   }
   if (!artist) {
@@ -116,7 +116,14 @@ const Artist = () => {
         <div className="liner">
           <div className="heading">
             <div className="heading__thumbnail">
-              <Thumbnail size="medium" circle canZoom type="artist" image={image} />
+              <Thumbnail
+                size="medium"
+                type="artist"
+                image={image}
+                loading={loading}
+                circle
+                canZoom
+              />
             </div>
             <div className="heading__content">
               <h1>{artist && artist.name}</h1>

src/js/views/Playlist.js

@@ -211,7 +211,7 @@ const Playlist = ({
     removeTracksFromPlaylist(uri, tracks_indexes);
   }
 
-  if (loading) {
+  if (loading && !playlist?.name) {
     return <Loader body loading />;
   }
   if (!playlist) {
@@ -254,7 +254,14 @@ const Playlist = ({
     <div className="view playlist-view content-wrapper preserve-3d">
 
       <div className="thumbnail-wrapper">
-        <Thumbnail size="large" glow canZoom images={playlist.images} type="playlist" />
+        <Thumbnail
+          size="large"
+          images={playlist.images}
+          type="playlist"
+          loading={playlist?.loading}
+          canZoom
+          glow
+        />
       </div>
 
       <div className="title">
@@ -310,7 +317,6 @@ const Playlist = ({
 
       <h4 className="no-bottom-margin">
         <I18n path="playlist.tracks.title" />
-        {loadingTracks && <Loader loading mini />}
         <div className="actions-wrapper">
           <FilterField
             initialValue={filter}

src/scss/components/_images.scss

@@ -19,9 +19,35 @@
 		z-index: 1;
 	}
 
+	.loader {
+		position: absolute;
+		top: calc(50% - 60px);
+		left: calc(50% - 60px);
+		z-index: 9;
+	}
+
+	&--loading {
+		.thumbnail__image:before {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 8;
+			background-color: rgba(0, 0, 0, 0.50);
+
+			@include theme('light') {
+				background-color: rgba(255, 255, 255, 0.50);
+			}
+		}
+	}
+
 	&__image {
 		@include animate(0.1s);
 		position: relative;
+		overflow: hidden;
 		z-index: 2;
 		width: 100%;
 		padding-bottom: 100%;

src/scss/components/_loader.scss

@@ -85,6 +85,7 @@ h4 {
 
 	&--mini {
 		padding: 0;
+		display: inline-block;
 
 		.loader__ring {
 			width: 24px;