feat(web): redirect to dataset page when there is a saved dataset

But only until the dataset page is rendered. Once rendered, other pages can be visited.

packages_rs/nextclade-web/src/components/Main/DatasetPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { Layout } from 'src/components/Layout/Layout'
 import { useRouter } from 'next/router'
 import { useRecoilState, useRecoilValue } from 'recoil'
@@ -11,6 +11,7 @@ import {
   WizardNavigationButton,
   WizardNavigationForm,
 } from 'src/components/Main/Wizard'
+import { isDatasetPageVisitedAtom } from 'src/state/navigation.state'
 import { WizardManualStep } from 'src/components/Main/WizardManualStep'
 import { FaChevronLeft as IconLeft, FaChevronRight as IconRight } from 'react-icons/fa6'
 import { ToggleRunAutomatically } from 'src/components/Main/RunPanel'
@@ -55,6 +56,11 @@ export function WizardManual() {
   const { state: shouldRunAutomatically } = useRecoilToggle(shouldRunAutomaticallyAtom)
   const canRun = useRecoilValue(canRunAtom)
   const runAnalysis = useRunAnalysis()
+  const { enable: setDatasetPageVisited } = useRecoilToggle(isDatasetPageVisitedAtom)
+
+  useEffect(() => {
+    setDatasetPageVisited()
+  }, [setDatasetPageVisited])
 
   const setExampleSequences = useCallback(() => {
     if (datasetCurrent) {

packages_rs/nextclade-web/src/components/Main/MainPage.tsx

@@ -1,8 +1,10 @@
 import { Dataset } from '_SchemaRoot'
+import { isNil } from 'lodash'
 import { useRouter } from 'next/router'
 import React, { useCallback, useState } from 'react'
-import { useRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import styled from 'styled-components'
+import { isDatasetPageVisitedAtom } from 'src/state/navigation.state'
 import { isInSuggestModeAtom } from 'src/state/autodetect.state'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
 import { Layout } from 'src/components/Layout/Layout'
@@ -11,7 +13,7 @@ import { MainSectionTitle } from 'src/components/Main/MainSectionTitle'
 import { WizardNavigationBar } from 'src/components/Main/Wizard'
 
 export function MainPage() {
-  const { push } = useRouter()
+  const { push, replace } = useRouter()
   const [dataset, setDataset] = useRecoilState(datasetCurrentAtom)
   const [datasetHighlighted, setDatasetHighlighted] = useState<Dataset | undefined>(dataset)
   const setIsInSuggestMode = useSetRecoilState(isInSuggestModeAtom)
@@ -29,6 +31,12 @@ export function MainPage() {
     }
   }, [datasetHighlighted, push, setDataset, setIsInSuggestMode])
 
+  const isDatasetPageVisited = useRecoilValue(isDatasetPageVisitedAtom)
+  if (!isDatasetPageVisited && !isNil(dataset)) {
+    // Trigger Suspense (loading screen) until the routing promise is resolved
+    throw replace('/dataset') // eslint-disable-line @typescript-eslint/no-throw-literal
+  }
+
   return (
     <Layout>
       <Main>

packages_rs/nextclade-web/src/state/navigation.state.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const isDatasetPageVisitedAtom = atom({
+  key: 'isDatasetPageVisitedAtom',
+  default: false,
+})