Integrate ListThumbnailLoader to list view and grid view.

ui/file_manager/file_manager/foreground/css/file_manager.css

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index c7de8511abdf8c54e58c99547d3e6df4bf43f309..bfbc9938c1b7b86d1fb1e4a9320c5c691e9f1fc1 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -732,15 +732,6 @@ body[type='full-page'] .detail-name .detail-icon {
   cursor: pointer;
 }
 
-.img-container > img {
-  -webkit-user-drag: none;
-  position: absolute;
-}
-
-.img-container > img:not(.cached) {
-  -webkit-animation: fadeIn 250ms linear;
-}
-
 .thumbnail-bottom {
   align-items: center;
   bottom: 0;
@@ -811,6 +802,20 @@ body.selecting .thumbnail-grid .thumbnail-item[selected] .checkmark {
   width: 100%;
 }
 
+.thumbnail-grid .img-container > .thumbnail {
+  -webkit-user-drag: none;
+  background-position: center;
+  background-size: cover;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 250ms linear;
+  width: 100%;
+}
+
+.thumbnail-grid .img-container > .thumbnail.loaded {
+  opacity: 1;
+}
+
 .thumbnail-grid .thumbnail-bottom {
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
@@ -1092,6 +1097,9 @@ li[renaming=''] .filename-label {
 }
 
 #list-container list li .detail-thumbnail {
+  -webkit-user-drag: none;
+  background-position: center;
+  background-size: cover;
   border-radius: 14px;
   height: 28px;
   opacity: 0;
@@ -1101,11 +1109,6 @@ li[renaming=''] .filename-label {
   width: 28px;
 }
 
-#list-container list li .detail-thumbnail > img {
-  -webkit-user-drag: none;
-  position: absolute;
-}
-
 #list-container list li:not([selected]) .detail-thumbnail.loaded {
   opacity: 1;
 }