fix: always render provider children (#459)

Author: SgtPooki

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 => {
     <HeliaProvider>
       <ExploreProvider>
         <HeaderComponent />
-         <PageRenderer />
+        <PageRenderer />
       </ExploreProvider>
     </HeliaProvider>
   )

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 <Loader color='dark' />
   }
 
   return (

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 (
     <div {...props}>
       <div

src/providers/explore.tsx

@@ -1,6 +1,5 @@
 import { CID } from 'multiformats/cid'
 import React, { createContext, useContext, useState, useEffect, type ReactNode, useCallback } from 'react'
-import { Loader } from '../components/loader/loader.js'
 import { type LinkObject } from '../components/object-info/links-table'
 import { ensureLeadingSlash } from '../lib/helpers.js'
 import { importCar } from '../lib/import-car.js'
@@ -204,12 +203,8 @@ export const ExploreProvider = ({ children, state, explorePathPrefix = '#/explor
     }
   }, [explorePathPrefix, helia])
 
-  if (helia == null) {
-    return <Loader color='dark' />
-  }
-
   return (
-    <ExploreContext.Provider value={{ exploreState, explorePathPrefix, isLoading, doExploreLink, doExploreUserProvidedPath, doUploadUserProvidedCar, setExplorePath }} key={path}>
+    <ExploreContext.Provider value={{ exploreState, explorePathPrefix, isLoading, doExploreLink, doExploreUserProvidedPath, doUploadUserProvidedCar, setExplorePath }}>
       {children}
     </ExploreContext.Provider>
   )