soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Improve guest help routing and loading
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 09:00:12 +01:00
parent 3a78c4f2c0
commit 03c7b20cae
8 changed files with 177 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/guest/pages/HelpArticlePage.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Loader2 } from 'lucide-react';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { Page } from './_util';
import { useLocale } from '../i18n/LocaleContext';
import { useTranslation } from '../i18n/useTranslation';
@@ -37,7 +37,9 @@ export default function HelpArticlePage() {
loadArticle();
}, [loadArticle]);
const title = article?.title ?? t('help.article.unavailable');
const title = state === 'loading'
? t('help.article.loadingTitle')
: (article?.title ?? t('help.article.unavailable'));
return (
<Page title={title}>
@@ -48,17 +50,30 @@ export default function HelpArticlePage() {
refreshingLabel={t('common.refreshing')}
>
<div className="mb-4">
<Button variant="ghost" size="sm" asChild>
<Button variant="outline" size="sm" className="rounded-full border-border/60 bg-background/70 px-3" asChild>
<Link to={basePath}>
{t('help.article.back')}
<span className="inline-flex items-center gap-2">
<ArrowLeft className="h-4 w-4" aria-hidden />
{t('help.article.back')}
</span>
</Link>
</Button>
</div>
{state === 'loading' && (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
{t('common.actions.loading')}
<div className="rounded-2xl border border-border/60 bg-card/70 p-5">
<div className="flex items-center gap-3 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
<div>
<div className="font-medium text-foreground">{t('help.article.loadingTitle')}</div>
<div className="text-xs text-muted-foreground">{t('help.article.loadingDescription')}</div>
</div>
</div>
<div className="mt-4 space-y-2 animate-pulse">
<div className="h-3 w-2/3 rounded-full bg-muted/60" />
<div className="h-3 w-5/6 rounded-full bg-muted/60" />
<div className="h-3 w-1/2 rounded-full bg-muted/60" />
</div>
</div>
)}
@@ -77,11 +92,6 @@ export default function HelpArticlePage() {
{article.updated_at && (
<div>{t('help.article.updated', { date: formatDate(article.updated_at, locale) })}</div>
)}
<Button variant="ghost" size="sm" asChild>
<Link to={basePath}>
← {t('help.article.back')}
</Link>
</Button>
</div>
<div className="overflow-x-auto">
<div