feat(DatasetCard): adjust skeleton

IQSS · Dec 1, 2023 · ad4f308 · ad4f308
1 parent 5e3b47c
commit ad4f308
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts
@@ -23,7 +23,7 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
     // TODO - Implement using the js-dataverse-client
     return new Promise((resolve) => {
       setTimeout(() => {
-        resolve(DatasetPreviewMother.createMany(200))
+        resolve(DatasetPreviewMother.createMany(10))
       }, 1000)
     })
   }

diff --git a/src/sections/home/datasets-list/DatasetCard.module.scss b/src/sections/home/datasets-list/DatasetCard.module.scss
@@ -16,8 +16,12 @@
 
 .thumbnail {
   width: 48px;
-  margin: 4px 12px 6px 0;
+  margin: 8px 12px 6px 0;
   font-size: 2.8em;
+
+  img {
+      vertical-align: top;
+  }
 }
 
 .info {

diff --git a/src/sections/home/datasets-list/DatasetsListSkeleton.tsx b/src/sections/home/datasets-list/DatasetsListSkeleton.tsx
@@ -9,16 +9,16 @@ export function DatasetsListSkeleton() {
           <Skeleton width="14%" />
         </div>
         <article>
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
         </article>
       </section>
     </SkeletonTheme>