feat: add loading and error message components

country-explorer/src/components/ErrorMessage.tsx

@@ -0,0 +1,27 @@
+interface ErrorMessageProps {
+  /** User-friendly explanation of what went wrong (e.g. an ApiError message). */
+  message: string;
+  /** Called when the user asks to try the request again. */
+  onRetry: () => void;
+}
+
+/**
+ * Generic error state for a failed API request. Rendered as an assertive
+ * live region so assistive technology announces the failure immediately,
+ * and always offers a way to retry instead of leaving the user stuck.
+ *
+ * Intended usage: pass `error instanceof ApiError ? error.message : '...'`
+ * from `useCountries` as `message`, and its `refetch` as `onRetry`.
+ */
+function ErrorMessage({ message, onRetry }: ErrorMessageProps) {
+  return (
+    <div role="alert" aria-live="assertive">
+      <p>{message}</p>
+      <button type="button" onClick={onRetry}>
+        Try again
+      </button>
+    </div>
+  );
+}
+
+export default ErrorMessage;

country-explorer/src/components/Loading.tsx

@@ -0,0 +1,19 @@
+interface LoadingProps {
+  /** Accessible status text; defaults to a generic loading message. */
+  message?: string;
+}
+
+/**
+ * Generic loading indicator for any async data fetch (e.g. `useCountries`).
+ * Rendered as a polite live region so assistive technology announces the
+ * status without interrupting whatever the user is doing.
+ */
+function Loading({ message = 'Loading…' }: LoadingProps) {
+  return (
+    <p role="status" aria-live="polite">
+      {message}
+    </p>
+  );
+}
+
+export default Loading;

country-explorer/src/hooks/useCountries.ts

@@ -9,7 +9,7 @@ const DEFAULT_REGION = 'europe';
 export const countriesQueryKey = (region: string) => ['countries', region] as const;
 
 export function useCountries(region: string = DEFAULT_REGION) {
-  const { data, isLoading, isError, error } = useQuery({
+  const { data, isLoading, isError, error, refetch } = useQuery({
     queryKey: countriesQueryKey(region),
     queryFn: () => getCountriesByRegion(region),
   });
@@ -19,5 +19,8 @@ export function useCountries(region: string = DEFAULT_REGION) {
     isLoading,
     isError,
     error,
+    // Exposed so a caller can wire it up as the retry action for an
+    // ErrorMessage component when a request fails.
+    refetch,
   };
 }