mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-12 16:23:36 -05:00
2e080a3a34
* [web] Add `.loading-screen` style * [web] Add `.loading-screen-error` style * [web] Nest styles in `.loading-screen` * [web] Simplify code, make a more valuable Storybook * [web] Add a reusable bootstrap-switcher argument to loading.stories.tsx * [web] Make `isBootstrap5()` work in storybook * [web] Revert unrelated changes around `ConnectionError` type * [web] Remove comment about unhandled error codes https://github.com/overleaf/internal/pull/20896/files#r1790572314 * [web] Don't repeat the `errorCode` prop type * [web] Remove unused CSS and magic padding * [web] Fixup SCSS division * [storybook] Revert Storybook changes (moved to another branch) * [web] Fixup SCSS division again (lint) * [web] Render with `Boolean(errorCode) && ...` instead of `errorCode && ...` * [web] Remove importants; use spacing var Addresses Tim's comments GitOrigin-RevId: e8b5623f4bb9aa72a255851f46b45b652a0dbb16
87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import { FC, useEffect, useState } from 'react'
|
|
import LoadingBranded from '@/shared/components/loading-branded'
|
|
import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
|
|
import getMeta from '@/utils/meta'
|
|
import { useConnectionContext } from '../context/connection-context'
|
|
import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
|
|
import { LoadingError, LoadingErrorProps } from './loading-error'
|
|
|
|
type Part = 'initial' | 'render' | 'connection' | 'translations' | 'project'
|
|
|
|
const initialParts = new Set<Part>(['initial'])
|
|
|
|
const totalParts = new Set<Part>([
|
|
'initial',
|
|
'render',
|
|
'connection',
|
|
'translations',
|
|
'project',
|
|
])
|
|
|
|
export const Loading: FC<{
|
|
setLoaded: (value: boolean) => void
|
|
}> = ({ setLoaded }) => {
|
|
const [loadedParts, setLoadedParts] = useState(initialParts)
|
|
|
|
const progress = (loadedParts.size / totalParts.size) * 100
|
|
|
|
useEffect(() => {
|
|
setLoaded(progress === 100)
|
|
}, [progress, setLoaded])
|
|
|
|
const { connectionState, isConnected } = useConnectionContext()
|
|
const i18n = useWaitForI18n()
|
|
const { projectJoined } = useIdeReactContext()
|
|
|
|
useEffect(() => {
|
|
setLoadedParts(value => new Set(value).add('render'))
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (isConnected) {
|
|
setLoadedParts(value => new Set(value).add('connection'))
|
|
}
|
|
}, [isConnected])
|
|
|
|
useEffect(() => {
|
|
if (i18n.isReady) {
|
|
setLoadedParts(value => new Set(value).add('translations'))
|
|
}
|
|
}, [i18n.isReady])
|
|
|
|
useEffect(() => {
|
|
if (projectJoined) {
|
|
setLoadedParts(value => new Set(value).add('project'))
|
|
}
|
|
}, [projectJoined])
|
|
|
|
// Use loading text from the server, because i18n will not be ready initially
|
|
const label = getMeta('ol-loadingText')
|
|
|
|
const errorCode = connectionState.error ?? (i18n.error ? 'i18n-error' : '')
|
|
|
|
return <LoadingUI progress={progress} label={label} errorCode={errorCode} />
|
|
}
|
|
|
|
type LoadingUiProps = {
|
|
progress: number
|
|
label: string
|
|
errorCode: LoadingErrorProps['errorCode']
|
|
}
|
|
|
|
export const LoadingUI: FC<LoadingUiProps> = ({
|
|
progress,
|
|
label,
|
|
errorCode,
|
|
}) => {
|
|
return (
|
|
<div className="loading-screen">
|
|
<LoadingBranded
|
|
loadProgress={progress}
|
|
label={label}
|
|
hasError={Boolean(errorCode)}
|
|
/>
|
|
{Boolean(errorCode) && <LoadingError errorCode={errorCode} />}
|
|
</div>
|
|
)
|
|
}
|