- Extract API error handling utility (utils/error-handling.ts) - Centralize error message extraction logic - Add type guards for API errors - Replace duplicated error handling across components - Create reusable Toast component (components/Toast.tsx) - Extract toast notification logic from profile page - Support auto-dismiss functionality - Consistent styling with shared styles - Extract form validation debouncing hook (hooks/useDebouncedValidation.ts) - Reusable debounced validation logic - Clean timeout management - Used in profile page for form validation - Consolidate duplicate styles (styles/auth-form.ts) - Use shared style tokens instead of duplicating values - Reduce code duplication between auth-form and shared styles - Extract loading state component (components/LoadingState.tsx) - Standardize loading UI across pages - Replace duplicated loading JSX patterns - Used in profile, exchange, and trades pages - Fix useRequireAuth dependency array - Remove unnecessary hasPermission from dependencies - Add eslint-disable comment with explanation - Improve hook stability and performance All frontend tests pass. Linting passes.
20 lines
483 B
TypeScript
20 lines
483 B
TypeScript
"use client";
|
|
|
|
import { layoutStyles } from "../styles/shared";
|
|
|
|
interface LoadingStateProps {
|
|
/** Custom loading message (default: "Loading...") */
|
|
message?: string;
|
|
}
|
|
|
|
/**
|
|
* Standard loading state component.
|
|
* Displays a centered loading message with consistent styling.
|
|
*/
|
|
export function LoadingState({ message = "Loading..." }: LoadingStateProps) {
|
|
return (
|
|
<main style={layoutStyles.main}>
|
|
<div style={layoutStyles.loader}>{message}</div>
|
|
</main>
|
|
);
|
|
}
|