fix(map): مرز خطای نقشه — تبِ قدیمی پس از استقرار بهجای مرگ بیصدای نقشه، دکمهٔ بارگیری دوباره میگیرد
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { lazy, Suspense } from 'react'
|
||||
import { Component, lazy, Suspense } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import type { ProjectsMapAllProps } from './ProjectsMapAll'
|
||||
import type { ProjectsMapSingleProps } from './ProjectsMapSingle'
|
||||
|
||||
@@ -17,18 +18,55 @@ function MapSkeleton({ className = '' }: { className?: string }) {
|
||||
return <div className={`animate-pulse rounded-3xl border border-ivory/10 bg-char/50 ${className}`} />
|
||||
}
|
||||
|
||||
/**
|
||||
* مرز خطای نقشه — تبِ باز از پیش از استقرار، تکههای قدیمی را درخواست میکند
|
||||
* که دیگر وجود ندارند (۴۰۴) و نقشه بیصدا میمیرد. این مرز خطا را میگیرد و
|
||||
* بارگیری دوبارهٔ کامل صفحه را پیشنهاد میدهد که تازهترین نسخه را میآورد.
|
||||
*/
|
||||
class MapErrorBoundary extends Component<{ children: ReactNode; className?: string }, { failed: boolean }> {
|
||||
state = { failed: false }
|
||||
static getDerivedStateFromError() {
|
||||
return { failed: true }
|
||||
}
|
||||
render() {
|
||||
if (this.state.failed) {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center gap-3 rounded-3xl border border-ivory/10 bg-char/50 ${this.props.className ?? ''}`}
|
||||
>
|
||||
<p className="px-6 text-center text-sm font-light text-ivory/60">
|
||||
بارگیری نقشه ناموفق بود — نسخهٔ صفحه در این تب قدیمی است
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.location.reload()}
|
||||
className="border border-copper/50 px-5 py-2 text-xs font-bold text-copper transition-colors duration-200 hover:bg-copper hover:text-char"
|
||||
>
|
||||
بارگیری دوبارهٔ صفحه
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
|
||||
export function LazyProjectsMapAll(props: ProjectsMapAllProps) {
|
||||
return (
|
||||
<Suspense fallback={<MapSkeleton className={props.className} />}>
|
||||
<ProjectsMapAll {...props} />
|
||||
</Suspense>
|
||||
<MapErrorBoundary className={props.className}>
|
||||
<Suspense fallback={<MapSkeleton className={props.className} />}>
|
||||
<ProjectsMapAll {...props} />
|
||||
</Suspense>
|
||||
</MapErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
export function LazyProjectsMapSingle(props: ProjectsMapSingleProps) {
|
||||
return (
|
||||
<Suspense fallback={<MapSkeleton className={props.className} />}>
|
||||
<ProjectsMapSingle {...props} />
|
||||
</Suspense>
|
||||
<MapErrorBoundary className={props.className}>
|
||||
<Suspense fallback={<MapSkeleton className={props.className} />}>
|
||||
<ProjectsMapSingle {...props} />
|
||||
</Suspense>
|
||||
</MapErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user