diff --git a/dev/devPage.tsx b/dev/devPage.tsx index 2943afbd..1a06fdef 100644 --- a/dev/devPage.tsx +++ b/dev/devPage.tsx @@ -6,7 +6,7 @@ import { createRoot } from 'react-dom/client' import { I18nextProvider, useTranslation } from 'react-i18next' import 'tachyons' import i18n from '../src/i18n.js' -import { ExplorePage, StartExploringPage, IpldExploreForm, IpldCarExploreForm, ExploreProvider, HeliaProvider, useExplore } from '../src/index.js' +import { ExplorePage, StartExploringPage, IpldExploreForm, IpldCarExploreForm, ExploreProvider, HeliaProvider, useExplore, useHelia } from '../src/index.js' globalThis.Buffer = globalThis.Buffer ?? Buffer @@ -65,6 +65,12 @@ const HeaderComponent: React.FC = () => { const PageRenderer = (): React.ReactElement => { const { setExplorePath, exploreState: { path } } = useExplore() + const { doInitHelia } = useHelia() + + useEffect(() => { + void doInitHelia() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) useEffect(() => { const onHashChange = (): void => { @@ -87,7 +93,7 @@ const App = (): React.ReactElement => { - + ) diff --git a/src/components/ExplorePage.tsx b/src/components/ExplorePage.tsx index 1ad887f4..9985f873 100644 --- a/src/components/ExplorePage.tsx +++ b/src/components/ExplorePage.tsx @@ -2,8 +2,10 @@ import React from 'react' import { Helmet } from 'react-helmet' import { useTranslation } from 'react-i18next' import ReactJoyride from 'react-joyride' +import { Loader } from '../components/loader/loader.js' import { explorerTour } from '../lib/tours.js' import { useExplore } from '../providers/explore.js' +import { useHelia } from '../providers/helia.js' import CidInfo from './cid-info/CidInfo.js' import ErrorBoundary from './error/ErrorBoundary' import { IpldExploreErrorComponent } from './explore/IpldExploreErrorComponent' @@ -25,6 +27,7 @@ export const ExplorePage = ({ }): null | React.ReactNode => { const { t, ready: tReady } = useTranslation('explore') + const { helia } = useHelia() const { exploreState, doExploreLink } = useExplore() const { path } = exploreState @@ -37,8 +40,8 @@ export const ExplorePage = ({ const { error, targetNode, localPath, nodes, pathBoundaries } = exploreState const sourceNode = nodes?.[0] ?? null - if (!tReady) { - return null + if (!tReady || helia == null) { + return } return ( diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx index f19226f6..766b9884 100644 --- a/src/components/loader/loader.tsx +++ b/src/components/loader/loader.tsx @@ -2,7 +2,7 @@ import React from 'react' import styles from './loader.module.css' export const Loader: React.FC<{ color?: string }> = ({ color = 'light', ...props }) => { - const className = `dib ${styles.laBallTrianglePath} la-${color} la-sm` + const className = `dib ${styles.laBallTrianglePath} ${color === 'dark' ? styles.laDark : ''} la-sm` return (
- } - return ( - + {children} )