fix(map): مرز خطای نقشه — تبِ قدیمی پس از استقرار به‌جای مرگ بی‌صدای نقشه، دکمهٔ بارگیری دوباره می‌گیرد

This commit is contained in:
aramesh-site deploy
2026-10-03 08:38:07 +00:00
parent 4e2ecaa69e
commit 41ead01e02
+45 -7
View File
@@ -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>
)
}