SPA Lazy Imports

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr192.6406015",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.1",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

public/locales/en/shared.json

@@ -1,5 +1,63 @@
 {
   "asterisksIndicateRequiredFields": "Asterisks indicate required fields",
   "remove": "Remove",
-  "add": "Add"
+  "add": "Add",
+  "pageNumberNotFound": {
+    "heading": "Page Number Not Found",
+    "message": "The page number you requested does not exist. Please try a different page number."
+  },
+  "pageNotFound": {
+    "heading": "Page Not Found",
+    "message": "The page you are looking for was not found."
+  },
+  "pagination": {
+    "results_one": "1 {{item}}",
+    "results_other": "{{start}} to {{end}} of {{formattedCount}} {{item}}s",
+    "accumulated": {
+      "one": "{{formattedCount}} {{item}}",
+      "lessThanPageSize": "{{formattedCount}} {{item}}s",
+      "moreThanPageSize": "{{accumulated}} of {{formattedCount}} {{item}}s displayed"
+    },
+    "pageSize": "{{item}}s per page"
+  },
+  "citationBlock": {
+    "learnAbout": "Learn About",
+    "standards": "Data Citation Standards"
+  },
+  "datasetMetadataForm": {
+    "metadataTip": {
+      "title": "Metadata Tip",
+      "content": "After adding the dataset, click the Edit Dataset button to add more metadata."
+    },
+    "validationAlert": {
+      "title": "Validation Error",
+      "content": "Required fields were missed or there was a validation error. Please scroll down to see details."
+    },
+    "requiredFields": "Asterisks indicate required fields",
+    "mayBecomeRequired": "One or more of these fields may become required if you add to one or more of these optional fields.",
+    "field": {
+      "required": "{{displayName}} is required",
+      "invalid": {
+        "url": "{{displayName}} is not a valid URL",
+        "email": "{{displayName}} is not a valid email",
+        "int": "{{displayName}} is not a valid integer",
+        "float": "{{displayName}} is not a valid float",
+        "date": "{{displayName}} is not a valid date. Please use the format {{dateFormat}}"
+      }
+    },
+    "status": {
+      "submitting": "Submitting...",
+      "success": "Form submitted successfully!",
+      "failed": "Error: Submission failed."
+    },
+    "states": {
+      "submitting": "Form Submitting",
+      "submissionSuccess": "Form submission successful"
+    },
+    "saveButton": {
+      "createMode": "Save Dataset",
+      "editMode": "Save Changes"
+    },
+    "cancelButton": "Cancel"
+  }
 }

src/i18n.ts

@@ -16,7 +16,20 @@ void i18next
   .init({
     fallbackLng: 'en',
     supportedLngs: ['en'],
-    ns: [],
+    ns: [
+      'shared',
+      'header',
+      'footer',
+      'file',
+      'astrophysics',
+      'biomedical',
+      'citation',
+      'codeMeta20',
+      'computationalworkflow',
+      'geospatial',
+      'journal',
+      'socialscience'
+    ],
     returnNull: false,
     backend: {
       loadPath:

src/index.tsx

@@ -4,11 +4,12 @@ import App from './App'
 import './i18n'
 import { LoadingProvider } from './sections/loading/LoadingProvider'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
+import { AppLoader } from './sections/shared/layout/app-loader/AppLoader'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
-    <React.Suspense>
+    <React.Suspense fallback={<AppLoader fullViewport />}>
       <LoadingProvider>
         <ThemeProvider>
           <App />

src/router/routes.tsx

@@ -1,17 +1,70 @@
+import { lazy, Suspense } from 'react'
 import { RouteObject } from 'react-router-dom'
 import { Route } from '../sections/Route.enum'
 import { Layout } from '../sections/layout/Layout'
 import { PageNotFound } from '../sections/page-not-found/PageNotFound'
-import { DatasetFactory } from '../sections/dataset/DatasetFactory'
-import { CreateDatasetFactory } from '../sections/create-dataset/CreateDatasetFactory'
-import { FileFactory } from '../sections/file/FileFactory'
-import { CollectionFactory } from '../sections/collection/CollectionFactory'
-import { UploadDatasetFilesFactory } from '../sections/upload-dataset-files/UploadDatasetFilesFactory'
-import { EditDatasetMetadataFactory } from '../sections/edit-dataset-metadata/EditDatasetMetadataFactory'
-import { CreateCollectionFactory } from '../sections/create-collection/CreateCollectionFactory'
-import { AccountFactory } from '../sections/account/AccountFactory'
 import { ProtectedRoute } from './ProtectedRoute'
-import { HomepageFactory } from '../sections/homepage/HomepageFactory'
+import { AppLoader } from '../sections/shared/layout/app-loader/AppLoader'
+
+const Homepage = lazy(() =>
+  import('../sections/homepage/HomepageFactory').then(({ HomepageFactory }) => ({
+    default: () => HomepageFactory.create()
+  }))
+)
+
+const CollectionPage = lazy(() =>
+  import('../sections/collection/CollectionFactory').then(({ CollectionFactory }) => ({
+    default: () => CollectionFactory.create()
+  }))
+)
+
+const DatasetPage = lazy(() =>
+  import('../sections/dataset/DatasetFactory').then(({ DatasetFactory }) => ({
+    default: () => DatasetFactory.create()
+  }))
+)
+
+const FilePage = lazy(() =>
+  import('../sections/file/FileFactory').then(({ FileFactory }) => ({
+    default: () => FileFactory.create()
+  }))
+)
+
+const CreateCollectionPage = lazy(() =>
+  import('../sections/create-collection/CreateCollectionFactory').then(
+    ({ CreateCollectionFactory }) => ({
+      default: () => CreateCollectionFactory.create()
+    })
+  )
+)
+
+const CreateDatasetPage = lazy(() =>
+  import('../sections/create-dataset/CreateDatasetFactory').then(({ CreateDatasetFactory }) => ({
+    default: () => CreateDatasetFactory.create()
+  }))
+)
+
+const UploadDatasetFilesPage = lazy(() =>
+  import('../sections/upload-dataset-files/UploadDatasetFilesFactory').then(
+    ({ UploadDatasetFilesFactory }) => ({
+      default: () => UploadDatasetFilesFactory.create()
+    })
+  )
+)
+
+const EditDatasetMetadataPage = lazy(() =>
+  import('../sections/edit-dataset-metadata/EditDatasetMetadataFactory').then(
+    ({ EditDatasetMetadataFactory }) => ({
+      default: () => EditDatasetMetadataFactory.create()
+    })
+  )
+)
+
+const AccountPage = lazy(() =>
+  import('../sections/account/AccountFactory').then(({ AccountFactory }) => ({
+    default: () => AccountFactory.create()
+  }))
+)
 
 export const routes: RouteObject[] = [
   {
@@ -21,47 +74,87 @@ export const routes: RouteObject[] = [
     children: [
       {
         path: Route.HOME,
-        element: HomepageFactory.create()
+        element: (
+          <Suspense fallback={<AppLoader />}>
+            <Homepage />
+          </Suspense>
+        )
       },
       {
         path: Route.COLLECTIONS_BASE,
-        element: CollectionFactory.create()
+        element: (
+          <Suspense fallback={<AppLoader />}>
+            <CollectionPage />
+          </Suspense>
+        )
       },
       {
         path: Route.COLLECTIONS,
-        element: CollectionFactory.create()
+        element: (
+          <Suspense fallback={<AppLoader />}>
+            <CollectionPage />
+          </Suspense>
+        )
       },
       {
         path: Route.DATASETS,
-        element: DatasetFactory.create()
+        element: (
+          <Suspense fallback={<AppLoader />}>
+            <DatasetPage />
+          </Suspense>
+        )
       },
       {
         path: Route.FILES,
-        element: FileFactory.create()
+        element: (
+          <Suspense fallback={<AppLoader />}>
+            <FilePage />
+          </Suspense>
+        )
       },
       // 🔐 Protected routes are only accessible to authenticated users
       {
         element: <ProtectedRoute />,
         children: [
           {
             path: Route.CREATE_COLLECTION,
-            element: CreateCollectionFactory.create()
+            element: (
+              <Suspense fallback={<AppLoader />}>
+                <CreateCollectionPage />
+              </Suspense>
+            )
           },
           {
             path: Route.CREATE_DATASET,
-            element: CreateDatasetFactory.create()
+            element: (
+              <Suspense fallback={<AppLoader />}>
+                <CreateDatasetPage />
+              </Suspense>
+            )
           },
           {
             path: Route.UPLOAD_DATASET_FILES,
-            element: UploadDatasetFilesFactory.create()
+            element: (
+              <Suspense fallback={<AppLoader />}>
+                <UploadDatasetFilesPage />
+              </Suspense>
+            )
           },
           {
             path: Route.EDIT_DATASET_METADATA,
-            element: EditDatasetMetadataFactory.create()
+            element: (
+              <Suspense fallback={<AppLoader />}>
+                <EditDatasetMetadataPage />
+              </Suspense>
+            )
           },
           {
             path: Route.ACCOUNT,
-            element: AccountFactory.create()
+            element: (
+              <Suspense fallback={<AppLoader />}>
+                <AccountPage />
+              </Suspense>
+            )
           }
         ]
       }

src/sections/account/Account.tsx

@@ -5,8 +5,12 @@ import { useLoading } from '../loading/LoadingContext'
 import { AccountHelper, AccountPanelTabKey } from './AccountHelper'
 import { ApiTokenSection } from './api-token-section/ApiTokenSection'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
-import { UpwardHierarchyNodeMother } from '../../../tests/component/shared/hierarchy/domain/models/UpwardHierarchyNodeMother'
 import styles from './Account.module.scss'
+import {
+  DvObjectType,
+  UpwardHierarchyNode
+} from '../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+import { ROOT_COLLECTION_ALIAS } from '../../collection/domain/models/Collection'
 
 const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
 
@@ -18,10 +22,11 @@ export const Account = ({ defaultActiveTabKey }: AccountProps) => {
   const { t } = useTranslation('account')
   const { setIsLoading } = useLoading()
 
-  const rootHierarchy = UpwardHierarchyNodeMother.createCollection({
-    name: 'Root',
-    id: 'root'
-  })
+  const rootHierarchy = new UpwardHierarchyNode(
+    'Root',
+    DvObjectType.COLLECTION,
+    ROOT_COLLECTION_ALIAS
+  )
 
   useEffect(() => {
     setIsLoading(false)