feat: add skeleton

IQSS · Jul 12, 2024 · 642b74e · 642b74e
1 parent d8b1a91
commit 642b74e
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 4 deletions.
diff --git a/src/sections/new-collection/NewCollection.tsx b/src/sections/new-collection/NewCollection.tsx
@@ -9,6 +9,7 @@ import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { CollectionForm, CollectionFormData } from './collection-form'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 import { PageNotFound } from '../page-not-found/PageNotFound'
+import { NewCollectionSkeleton } from './NewCollectionSkeleton'
 
 interface NewCollectionProps {
   ownerCollectionId: string
@@ -31,13 +32,12 @@ export function NewCollection({ ownerCollectionId, collectionRepository }: NewCo
     }
   }, [isLoading, isLoadingCollection, setIsLoading])
 
-  if (!isLoading && !collection) {
+  if (!isLoadingCollection && !collection) {
     return <PageNotFound />
   }
 
-  // TODO:ME Create Skeleton
-  if (isLoading || !collection) {
-    return <p>Loading...</p>
+  if (isLoadingCollection || !collection) {
+    return <NewCollectionSkeleton />
   }
 
   const formDefaultValues: CollectionFormData = {

diff --git a/src/sections/new-collection/NewCollectionSkeleton.tsx b/src/sections/new-collection/NewCollectionSkeleton.tsx
@@ -0,0 +1,76 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import { Col, Row } from '@iqss/dataverse-design-system'
+import { BreadcrumbsSkeleton } from '../shared/hierarchy/BreadcrumbsSkeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
+
+export const NewCollectionSkeleton = () => (
+  <SkeletonTheme>
+    <section data-testid="edit-dataset-metadata-skeleton">
+      <BreadcrumbsSkeleton />
+      <Skeleton height="40px" width="350px" style={{ marginBottom: 16 }} />
+
+      <SeparationLine />
+
+      <Skeleton height="24px" width="350px" style={{ marginBottom: 16 }} />
+
+      {/* Top fields section skeleton */}
+      <Row style={{ marginBottom: 16 }}>
+        <Col sm={6}>
+          <Skeleton width={120} />
+          <Skeleton width="100%" height={38} />
+        </Col>
+      </Row>
+      <Row style={{ marginBottom: 16 }}>
+        <Col sm={6}>
+          <Skeleton width={120} />
+          <Skeleton width="100%" height={38} />
+        </Col>
+
+        <Col sm={6}>
+          <Skeleton width={120} />
+          <Skeleton width="100%" height={38} />
+        </Col>
+      </Row>
+      <Row style={{ marginBottom: 16 }}>
+        <Col sm={6}>
+          <Skeleton width={120} />
+          <Skeleton width="100%" height={38} />
+        </Col>
+
+        <Col sm={6}>
+          <Skeleton width={120} />
+          <Skeleton width="100%" height={38} />
+        </Col>
+      </Row>
+      <Row style={{ marginBottom: 16 }}>
+        <Col sm={6}>
+          <Col style={{ marginBottom: 16 }}>
+            <Skeleton width={120} />
+            <Skeleton width="100%" height={38} />
+          </Col>
+
+          <Skeleton width={120} />
+          <Row>
+            <Col md={9}>
+              <Skeleton height={38} />
+            </Col>
+            <Col md={3}>
+              <Skeleton width={42} height={42} />
+            </Col>
+          </Row>
+        </Col>
+
+        <Col sm={6}>
+          <Skeleton width={120} />
+          <Skeleton width="100%" height={130} />
+        </Col>
+      </Row>
+
+      <SeparationLine />
+
+      <Skeleton height={145} width="100%" style={{ marginBottom: 16 }} />
+      <Skeleton height={145} width="100%" style={{ marginBottom: 16 }} />
+    </section>
+  </SkeletonTheme>
+)