Skip to content

fix: update loading text and screen on redirect-page #714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: update loading text and screen on redirect-page #714

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
354c6be
fix: update loading text and screen on redirect-page
dhvll May 13, 2025
2951727
Merge branch 'ipfs:main' into main
dhvll May 15, 2025
d0e9b84
refactor components
dhvll May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 151 additions & 44 deletions src/pages/redirect-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
import React, { useCallback, useContext, useEffect, useMemo, useState, type ReactElement } from 'react'
import Header from '../components/Header.jsx'
import { ConfigProvider } from '../context/config-context.jsx'
import { ServiceWorkerContext, ServiceWorkerProvider } from '../context/service-worker-context.jsx'
import { setConfig, type ConfigDb } from '../lib/config-db.js'
import { getSubdomainParts } from '../lib/get-subdomain-parts.js'
import { isConfigPage } from '../lib/is-config-page.js'
import { getUiComponentLogger, uiLogger } from '../lib/logger.js'
import { tellSwToReloadConfig } from '../lib/sw-comms.js'
import { translateIpfsRedirectUrl } from '../lib/translate-ipfs-redirect-url.js'
import './default-page-styles.css'

const uiComponentLogger = getUiComponentLogger('redirect-page')
const log = uiLogger.forComponent('redirect-page')
import React, {
useCallback,
useContext,
useEffect,
useMemo,
useState,
type ReactElement,
} from "react"
import Header from "../components/Header.jsx"
import LoadingIndicator from "../components/loading-indicator.jsx"
import { ConfigProvider } from "../context/config-context.jsx"
import {
ServiceWorkerContext,
ServiceWorkerProvider,
} from "../context/service-worker-context.jsx"
import { setConfig, type ConfigDb } from "../lib/config-db.js"
import { getSubdomainParts } from "../lib/get-subdomain-parts.js"
import { isConfigPage } from "../lib/is-config-page.js"
import { getUiComponentLogger, uiLogger } from "../lib/logger.js"
import { tellSwToReloadConfig } from "../lib/sw-comms.js"
import { translateIpfsRedirectUrl } from "../lib/translate-ipfs-redirect-url.js"
import "./default-page-styles.css"

const uiComponentLogger = getUiComponentLogger("redirect-page")
const log = uiLogger.forComponent("redirect-page")
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please be sure to make only changes where there are new changes, and follow existing code style?


const ConfigIframe: React.FC = () => {
const { parentDomain } = getSubdomainParts(window.location.href)
Expand All @@ -20,13 +31,20 @@ const ConfigIframe: React.FC = () => {
let iframeSrc
if (parentDomain == null || parentDomain === window.location.href) {
const url = new URL(window.location.href)
url.pathname = '/'
url.hash = `#/ipfs-sw-config@origin=${encodeURIComponent(window.location.origin)}`
url.pathname = "/"
url.hash = `#/ipfs-sw-config@origin=${encodeURIComponent(
window.location.origin
)}`

iframeSrc = url.href
} else {
const portString = window.location.port === '' ? '' : `:${window.location.port}`
iframeSrc = `${window.location.protocol}//${parentDomain}${portString}/#/ipfs-sw-config@origin=${encodeURIComponent(window.location.origin)}`
const portString =
window.location.port === "" ? "" : `:${window.location.port}`
iframeSrc = `${
window.location.protocol
}//${parentDomain}${portString}/#/ipfs-sw-config@origin=${encodeURIComponent(
window.location.origin
)}`
}

const [isVisible, setIsVisible] = useState(false)
Expand All @@ -39,78 +57,167 @@ const ConfigIframe: React.FC = () => {
}, [isServiceWorkerRegistered])

return (
<div style={{ display: isVisible ? 'block' : 'none' }}>
<iframe id="redirect-config-iframe" src={iframeSrc} style={{ width: '100vw', height: '100vh', border: 'none' }} />
<div style={{ display: isVisible ? "block" : "none" }}>
<iframe
id="redirect-config-iframe"
src={iframeSrc}
style={{ width: "100vw", height: "100vh", border: "none" }}
/>
</div>
)
}

function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean }): ReactElement {
function RedirectPage({
showConfigIframe = true,
}: {
showConfigIframe?: boolean
}): ReactElement {
const { isServiceWorkerRegistered } = useContext(ServiceWorkerContext)
const [reloadUrl, setReloadUrl] = useState(translateIpfsRedirectUrl(window.location.href).href)
const [reloadUrl, setReloadUrl] = useState(
translateIpfsRedirectUrl(window.location.href).href
)
const [isLoadingContent, setIsLoadingContent] = useState(false)
const [isConfigLoading, setIsConfigLoading] = useState(true)

useEffect(() => {
if (isConfigPage(window.location.hash)) {
setReloadUrl(window.location.href.replace('#/ipfs-sw-config', ''))
setReloadUrl(window.location.href.replace("#/ipfs-sw-config", ""))
}

async function doWork (config: ConfigDb): Promise<void> {
async function doWork(config: ConfigDb): Promise<void> {
try {
await setConfig(config, uiComponentLogger)
await tellSwToReloadConfig()
log.trace('redirect-page: RELOAD_CONFIG_SUCCESS on %s', window.location.origin)
log.trace(
"redirect-page: RELOAD_CONFIG_SUCCESS on %s",
window.location.origin
)
setIsConfigLoading(false)
} catch (err) {
log.error('redirect-page: error setting config on subdomain', err)
log.error("redirect-page: error setting config on subdomain", err)
}
}
const listener = (event: MessageEvent): void => {
if (event.data?.source === 'helia-sw-config-iframe') {
log.trace('redirect-page: received RELOAD_CONFIG message from iframe', event.data)
if (event.data?.source === "helia-sw-config-iframe") {
log.trace(
"redirect-page: received RELOAD_CONFIG message from iframe",
event.data
)
const config = event.data?.config
if (config != null) {
void doWork(config as ConfigDb)
} else {
log.error('redirect-page: received RELOAD_CONFIG message from iframe, but no config', event.data)
log.error(
"redirect-page: received RELOAD_CONFIG message from iframe, but no config",
event.data
)
}
}
}
window.addEventListener('message', listener)
window.addEventListener("message", listener)
return () => {
window.removeEventListener('message', listener)
window.removeEventListener("message", listener)
}
}, [])

const displayString: string = useMemo(() => {
if (!isServiceWorkerRegistered) {
return 'Registering Helia service worker...'
return "Setting up Helia service worker to handle IPFS content..."
}
if (!isConfigPage(window.location.hash)) {
return 'Redirecting you.'
return "Preparing to load your IPFS content..."
}
if (isConfigLoading) {
return "Configuring Helia service worker..."
}

return 'Loading...'
}, [isServiceWorkerRegistered])
return "Almost there! Loading your content..."
}, [isServiceWorkerRegistered, isConfigLoading])

const loadContent = useCallback(() => {
setIsLoadingContent(true)
window.location.href = reloadUrl
}, [reloadUrl])
if (!isLoadingContent) {
setIsLoadingContent(true)
// Use replace instead of href to prevent back button issues
window.location.replace(reloadUrl)
}
}, [reloadUrl, isLoadingContent])

// Handle initial redirect when service worker is ready
useEffect(() => {
if (isServiceWorkerRegistered && !isConfigPage(window.location.hash) && !isLoadingContent && !isConfigLoading) {
loadContent()
if (
isServiceWorkerRegistered &&
!isConfigPage(window.location.hash) &&
!isLoadingContent &&
!isConfigLoading
) {
void loadContent()
}
}, [isServiceWorkerRegistered, isConfigLoading, isLoadingContent])
}, [
isServiceWorkerRegistered,
isConfigLoading,
isLoadingContent,
loadContent,
])

// Handle redirect after config is loaded
useEffect(() => {
if (!isConfigLoading && !isLoadingContent && isServiceWorkerRegistered) {
void loadContent()
}
}, [
isConfigLoading,
isLoadingContent,
isServiceWorkerRegistered,
loadContent,
])

// Force redirect if we're stuck
useEffect(() => {
const timeout = setTimeout(() => {
if (!isLoadingContent && isServiceWorkerRegistered) {
void loadContent()
}
}, 2000) // 2 second timeout

return () => clearTimeout(timeout)
}, [isLoadingContent, isServiceWorkerRegistered, loadContent])

return (
<>
<Header />
<div className="redirect-page">
<div className="pa4-l mw7 mv5 center pa4">
<h3 className="mt5">{displayString}</h3>
<div
className="redirect-page"
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
minHeight: "calc(100vh - 80px)",
backgroundColor: "#f5f6fa",
}}
>
<div
style={{
textAlign: "center",
padding: "2rem",
borderRadius: "8px",
backgroundColor: "white",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
maxWidth: "600px",
width: "90%",
}}
>
<LoadingIndicator />
<h2
style={{
fontSize: "1.5rem",
color: "#2c3e50",
marginBottom: "1rem",
marginTop: "1.5rem",
}}
>
{displayString}
</h2>
</div>
{showConfigIframe && <ConfigIframe />}
</div>
Expand Down