fix(Loading): show when opening dataset page

src/sections/dataset/Dataset.tsx

@@ -12,16 +12,21 @@ import { DatasetFiles } from './dataset-files/DatasetFiles'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { DatasetActionButtons } from './dataset-action-buttons/DatasetActionButtons'
 import { useDataset } from './DatasetContext'
+import { useEffect } from 'react'
 
 interface DatasetProps {
   fileRepository: FileRepository
 }
 
 export function Dataset({ fileRepository }: DatasetProps) {
-  const { dataset } = useDataset()
-  const { isLoading } = useLoading()
+  const { setIsLoading } = useLoading()
+  const { dataset, isLoading } = useDataset()
   const { t } = useTranslation('dataset')
 
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading])
+
   if (isLoading) {
     return <DatasetSkeleton />
   }

src/sections/dataset/DatasetContext.ts

@@ -3,9 +3,11 @@ import { Dataset } from '../../dataset/domain/models/Dataset'
 
 interface DatasetContextProps {
   dataset: Dataset | undefined
+  isLoading: boolean
 }
 export const DatasetContext = createContext<DatasetContextProps>({
-  dataset: undefined
+  dataset: undefined,
+  isLoading: false
 })
 
 export const useDataset = () => useContext(DatasetContext)

src/sections/dataset/DatasetProvider.tsx

@@ -2,7 +2,6 @@ import { PropsWithChildren, useEffect, useState } from 'react'
 import { DatasetContext } from './DatasetContext'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { Dataset } from '../../dataset/domain/models/Dataset'
-import { useLoading } from '../loading/LoadingContext'
 import { getDatasetByPersistentId } from '../../dataset/domain/useCases/getDatasetByPersistentId'
 import { getDatasetByPrivateUrlToken } from '../../dataset/domain/useCases/getDatasetByPrivateUrlToken'
 
@@ -20,7 +19,7 @@ export function DatasetProvider({
   children
 }: PropsWithChildren<DatasetProviderProps>) {
   const [dataset, setDataset] = useState<Dataset>()
-  const { setIsLoading } = useLoading()
+  const [isLoading, setIsLoading] = useState(true)
   const getDataset = () => {
     if (searchParams.persistentId) {
       return getDatasetByPersistentId(repository, searchParams.persistentId, searchParams.version)
@@ -45,5 +44,7 @@ export function DatasetProvider({
       })
   }, [repository, searchParams])
 
-  return <DatasetContext.Provider value={{ dataset }}>{children}</DatasetContext.Provider>
+  return (
+    <DatasetContext.Provider value={{ dataset, isLoading }}>{children}</DatasetContext.Provider>
+  )
 }

src/sections/loading/LoadingContext.ts

@@ -6,7 +6,7 @@ interface LoadingContextProps {
 }
 
 export const LoadingContext = createContext<LoadingContextProps>({
-  isLoading: false,
+  isLoading: true,
   setIsLoading: /* istanbul ignore next */ () => {}
 })
 

src/sections/loading/LoadingProvider.tsx

@@ -2,7 +2,9 @@ import { useState, PropsWithChildren } from 'react'
 import { LoadingContext } from './LoadingContext'
 
 export function LoadingProvider({ children }: PropsWithChildren) {
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  console.log('isLoading', isLoading)
 
   return (
     <LoadingContext.Provider value={{ isLoading, setIsLoading }}>

src/stories/dataset/Dataset.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../WithI18next'
 import { WithLayout } from '../WithLayout'
 import { Dataset } from '../../sections/dataset/Dataset'
-import { WithLayoutLoading } from '../WithLayoutLoading'
 import { WithAnonymizedView } from './WithAnonymizedView'
 import { FileMockRepository } from '../files/FileMockRepository'
 import { WithCitationMetadataBlockInfo } from './WithCitationMetadataBlockInfo'
@@ -14,6 +13,7 @@ import { WithFilePermissionsGranted } from '../files/file-permission/WithFilePer
 import { WithDataset } from './WithDataset'
 import { WithDatasetDraftAsOwner } from './WithDatasetDraftAsOwner'
 import { WithDatasetNotFound } from './WithDatasetNotFound'
+import { WithDatasetLoading } from './WithDatasetLoading'
 
 const meta: Meta<typeof Dataset> = {
   title: 'Pages/Dataset',
@@ -39,7 +39,7 @@ export const DraftWithAllDatasetPermissions: Story = {
 }
 
 export const Loading: Story = {
-  decorators: [WithLayoutLoading, WithDataset, WithFilePermissionsDenied],
+  decorators: [WithLayout, WithDatasetLoading, WithFilePermissionsDenied],
   render: () => <Dataset fileRepository={new FileMockRepository()} />
 }
 

src/stories/dataset/WithDatasetLoading.tsx

@@ -0,0 +1,23 @@
+import { StoryFn } from '@storybook/react'
+import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
+import { Dataset } from '../../dataset/domain/models/Dataset'
+import { DatasetProvider } from '../../sections/dataset/DatasetProvider'
+
+export const WithDatasetLoading = (Story: StoryFn) => {
+  const datasetRepository = {} as DatasetRepository
+  datasetRepository.getByPersistentId = (
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    persistentId: string,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    version?: string | undefined
+  ): Promise<Dataset | undefined> => {
+    return new Promise(() => {})
+  }
+  return (
+    <DatasetProvider
+      repository={datasetRepository}
+      searchParams={{ persistentId: 'doi:10.5072/FK2/8YOKQI' }}>
+      <Story />
+    </DatasetProvider>
+  )
+}

tests/component/dataset/domain/models/DatasetMother.ts

@@ -431,6 +431,7 @@ export class DatasetMother {
         canDeleteDataset: false
       },
       locks: [],
+      isReleased: true,
       ...props
     })
   }

tests/component/sections/dataset/Dataset.spec.tsx

@@ -2,7 +2,6 @@ import { DatasetRepository } from '../../../../src/dataset/domain/repositories/D
 import { Dataset } from '../../../../src/sections/dataset/Dataset'
 import { DatasetMother } from '../../dataset/domain/models/DatasetMother'
 import { LoadingProvider } from '../../../../src/sections/loading/LoadingProvider'
-import { useLoading } from '../../../../src/sections/loading/LoadingContext'
 import { ANONYMIZED_FIELD_VALUE } from '../../../../src/dataset/domain/models/Dataset'
 import { AnonymizedContext } from '../../../../src/sections/dataset/anonymized/AnonymizedContext'
 import { FileRepository } from '../../../../src/files/domain/repositories/FileRepository'
@@ -39,26 +38,7 @@ describe('Dataset', () => {
   it('renders skeleton while loading', () => {
     const testDataset = DatasetMother.create()
 
-    const buttonText = 'Toggle Loading'
-    const TestComponent = () => {
-      const { isLoading, setIsLoading } = useLoading()
-      return (
-        <>
-          <button onClick={() => setIsLoading(true)}>{buttonText}</button>
-          {isLoading && <div>Loading...</div>}
-        </>
-      )
-    }
-
-    mountWithDataset(
-      <>
-        <Dataset fileRepository={fileRepository} />
-        <TestComponent />
-      </>,
-      testDataset
-    )
-
-    cy.findByText(buttonText).click()
+    mountWithDataset(<Dataset fileRepository={fileRepository} />, testDataset)
 
     cy.findByTestId('dataset-skeleton').should('exist')
     cy.findByText(testDataset.getTitle()).should('not.exist')

tests/component/sections/dataset/DatasetProvider.spec.tsx

@@ -3,11 +3,9 @@ import { DatasetRepository } from '../../../../src/dataset/domain/repositories/D
 import { DatasetMother } from '../../dataset/domain/models/DatasetMother'
 import { useDataset } from '../../../../src/sections/dataset/DatasetContext'
 import { LoadingProvider } from '../../../../src/sections/loading/LoadingProvider'
-import { useLoading } from '../../../../src/sections/loading/LoadingContext'
 
 function TestComponent() {
-  const { dataset } = useDataset()
-  const { isLoading } = useLoading()
+  const { dataset, isLoading } = useDataset()
 
   return (
     <div>

tests/component/sections/layout/top-bar-progress-indicator/TopBarProgressIndicator.spec.tsx

@@ -5,7 +5,7 @@ describe('TopBarProgressIndicator', () => {
   it('should render without errors', () => {
     cy.mount(<TopBarProgressIndicator />)
 
-    cy.get('canvas').should('not.exist')
+    cy.get('canvas').should('exist')
   })
 
   it('should render the TopBarProgress when loading is true', () => {

tests/component/sections/loading/LoadingProvider.spec.tsx

@@ -12,13 +12,13 @@ describe('LoadingProvider', () => {
     cy.findByText('Hello, world!').should('exist')
   })
 
-  it('should set isLoading to true when setIsLoading is called', () => {
+  it('should set isLoading to false when setIsLoading is called', () => {
     const buttonText = 'Toggle Loading'
     const TestComponent = () => {
       const { isLoading, setIsLoading } = useLoading()
       return (
         <>
-          <button onClick={() => setIsLoading(true)}>{buttonText}</button>
+          <button onClick={() => setIsLoading(false)}>{buttonText}</button>
           {isLoading && <div>Loading...</div>}
         </>
       )
@@ -32,10 +32,10 @@ describe('LoadingProvider', () => {
 
     cy.findByText(buttonText).should('exist')
 
-    cy.findByText('Loading...').should('not.exist')
+    cy.findByText('Loading...').should('exist')
 
     cy.findByText(buttonText).click()
 
-    cy.findByText('Loading...').should('exist')
+    cy.findByText('Loading...').should('not.exist')
   })
 })