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}
)