feat(empty-loading-states): Bessere Loading- und Empty-States in allen List-Pages [tsc:ok]
This commit is contained in:
parent
48af59fe54
commit
4190aa07e4
@ -1,7 +1,8 @@
|
||||
{
|
||||
"completed_features": [
|
||||
"toast-notifications"
|
||||
"toast-notifications",
|
||||
"logout-everywhere"
|
||||
],
|
||||
"current_feature": "logout-everywhere",
|
||||
"current_feature": "empty-loading-states",
|
||||
"started_at": "2026-05-23T04:57:10.921624"
|
||||
}
|
||||
@ -372,3 +372,15 @@ src/routes/customers.ts(22,36): error TS7006: Parameter
|
||||
- `04:57:46` **INFO** wrote 1961 chars in 16.1s (attempt 1)
|
||||
- `04:57:46` **INFO** Running tsc --noEmit on api…
|
||||
- `04:57:47` **INFO** tsc clean ✓
|
||||
- `04:57:47` **INFO** Committed feature logout-everywhere
|
||||
- `04:57:47` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: empty-loading-states (2026-05-23 04:57:47)
|
||||
|
||||
- `04:57:47` **INFO** Description: Bessere Loading- und Empty-States in allen List-Pages
|
||||
- `04:57:47` **INFO** Generating apps/web/src/components/EmptyState.tsx (Reusable EmptyState-Komponente. Props: title (string), description (st…)
|
||||
- `04:57:56` **INFO** wrote 910 chars in 8.4s (attempt 1)
|
||||
- `04:57:56` **INFO** Generating apps/web/src/components/LoadingSpinner.tsx (Reusable LoadingSpinner. Props: label? (string, default 'Lädt…'). Tail…)
|
||||
- `04:58:00` **INFO** wrote 453 chars in 4.2s (attempt 1)
|
||||
- `04:58:00` **INFO** Running tsc --noEmit on api…
|
||||
- `04:58:01` **INFO** tsc clean ✓
|
||||
|
||||
34
apps/web/src/components/EmptyState.tsx
Normal file
34
apps/web/src/components/EmptyState.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
interface EmptyStateProps {
|
||||
title: string;
|
||||
description: string;
|
||||
action?: {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
export default function EmptyState({ title, description, action }: EmptyStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center max-w-md mx-auto">
|
||||
<div className="text-6xl mb-4">
|
||||
📋
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400 mb-6">
|
||||
{description}
|
||||
</p>
|
||||
{action && (
|
||||
<button
|
||||
onClick={action.onClick}
|
||||
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors duration-200 shadow-sm"
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
apps/web/src/components/LoadingSpinner.tsx
Normal file
14
apps/web/src/components/LoadingSpinner.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export default function LoadingSpinner({ label = 'Lädt…' }: LoadingSpinnerProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-3 p-4">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600" />
|
||||
{label && <span className="text-sm font-medium text-gray-600">{label}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user