23 lines
1.0 KiB
React
23 lines
1.0 KiB
React
import React, { Suspense, lazy, useMemo, useState } from 'react';
|
||
|
||
class ViewErrorBoundary extends React.Component {
|
||
state = { failed: false };
|
||
static getDerivedStateFromError() { return { failed: true }; }
|
||
render() {
|
||
if (this.state.failed) return <div role="alert" className="p-4 border border-red-200 rounded-xl bg-red-50 text-red-900">
|
||
<p>Bu ekran yüklenemedi. Bağlantınızı kontrol edip yeniden deneyebilirsiniz.</p>
|
||
<button type="button" onClick={this.props.retry} className="mt-3 px-4 py-2 rounded-lg border border-red-300">Yeniden dene</button>
|
||
</div>;
|
||
return this.props.children;
|
||
}
|
||
}
|
||
|
||
/** Retry only this view; keep the application and saved work mounted. */
|
||
export function DeferredView({ load }) {
|
||
const [attempt, setAttempt] = useState(0);
|
||
const View = useMemo(() => lazy(load), [load, attempt]);
|
||
return <ViewErrorBoundary key={attempt} retry={() => setAttempt(n => n + 1)}>
|
||
<Suspense fallback={<p role="status" className="p-4 text-slate-600">Ekran yükleniyor…</p>}><View /></Suspense>
|
||
</ViewErrorBoundary>;
|
||
}
|