fix comments

Author: nicoecheza

packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css

@@ -11,7 +11,3 @@
 .AssetPreview .GltfPreview.hidden {
   visibility: hidden;
 }
-
-.AssetPreview > .loading {
-  position: absolute;
-}

packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx

@@ -6,7 +6,6 @@ import { AiFillSound } from 'react-icons/ai'
 import { IoVideocamOutline } from 'react-icons/io5'
 import { FaFile } from 'react-icons/fa'
 
-import { Loading } from '../Loading'
 import { toWearableWithBlobs } from './utils'
 import { Props } from './types'
 
@@ -61,13 +60,12 @@ function GltfPreview({ value, resources, onScreenshot, onLoad }: Props) {
           id={value.name}
           blob={toWearableWithBlobs(value, resources)}
           disableAutoRotate
-          background="#3c3c3c"
+          disableBackground
           projection={PreviewProjection.ORTHOGRAPHIC}
           camera={PreviewCamera.STATIC}
           onLoad={handleLoad}
         />
       </div>
-      {loading && <Loading dimmer={false} />}
     </>
   )
 }

packages/@dcl/inspector/src/components/Assets/Assets.css

@@ -17,7 +17,7 @@
   padding-left: 8px;
   display: flex;
   background: var(--tree-bg-color);
-  height: 60px;
+  padding: 5px 0;
   position: relative;
   align-items: center;
   justify-content: center;

packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css

@@ -32,8 +32,15 @@
 }
 
 .CreateCustomAsset .preview-container .AssetPreview {
+  display: none;
+}
+
+.CreateCustomAsset .preview-container .thumbnail {
   width: 100%;
   height: 100%;
+  background-color: var(--background-gray);
+  background-size: cover;
+  background-position: center;
 }
 
 .CreateCustomAsset .loader-container {

packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx

@@ -112,10 +112,12 @@ const CreateCustomAsset: React.FC = () => {
         <div className="file-container">
           {previewFile && resources !== null ? (
             <div className="preview-container">
-              {isGeneratingThumbnail && (
+              {isGeneratingThumbnail && !thumbnail ? (
                 <div className="loader-container">
                   <Loader active size="small" />
                 </div>
+              ) : (
+                <div className="thumbnail" style={{ backgroundImage: `url(${thumbnail})` }}></div>
               )}
               <AssetPreview value={previewFile} resources={resources} onScreenshot={handleScreenshot} />
             </div>

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css

@@ -1,3 +1,7 @@
+.ImportAssetModalOverlay {
+  z-index: 2;
+}
+
 .ImportAsset {
   height: 100%;
 }

packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css

@@ -38,20 +38,26 @@
 .Slider .asset > div {
   display: flex;
   flex-direction: column;
-  margin: 10px 10px 5px 10px;
+  margin: 10px;
   width: 150px;
 }
 
-.Slider .asset > div .AssetPreview {
+.Slider .asset .loading {
+  position: relative;
+}
+
+.Slider .asset .AssetPreview {
+  display: none;
+}
+
+.Slider .asset .thumbnail,
+.Slider .asset .loading {
   margin-bottom: 12px;
   width: 150px;
   height: 150px;
   background-color: var(--background-gray);
-}
-
-.Slider .asset > div .AssetPreview > svg {
-  width: 60%;
-  height: 60%;
+  background-size: cover;
+  background-position: center;
 }
 
 .Slider .asset .name-error {

packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx

@@ -5,6 +5,7 @@ import cx from 'classnames'
 import { AssetPreview } from '../../AssetPreview'
 import { Button } from '../../Button'
 import { Input } from '../../Input'
+import { Loading } from '../../Loading'
 
 import { getAssetSize, getAssetResources, determineAssetType, formatFileName } from '../utils'
 
@@ -110,6 +111,11 @@ export function Slider({ assets, onSubmit, isNameValid }: PropTypes) {
             <div className={cx('asset', { active: slide === i })} key={i}>
               <div>
                 <AssetPreview value={$.blob} resources={getAssetResources($)} onScreenshot={handleScreenshot($)} />
+                {screenshots[$.blob.name] ? (
+                  <div className="thumbnail" style={{ backgroundImage: `url(${screenshots[$.blob.name]})` }}></div>
+                ) : (
+                  <Loading dimmer={false} />
+                )}
                 <Input value={$.name} onChange={handleNameChange(i)} />
                 {!isNameUnique($) && <span className="name-error">Filename already exists</span>}
               </div>