feat(frontend): add optimistic UI loading state to ReceiptQrCode

Author: bamiebot-maker

Dechat/dex_with_fiat_frontend/src/components/ReceiptQrCode.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import QRCode from 'qrcode';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 
 interface ReceiptQrCodeProps {
   value: string;
@@ -10,9 +11,12 @@ interface ReceiptQrCodeProps {
 
 export default function ReceiptQrCode({ value, label }: ReceiptQrCodeProps) {
   const [dataUrl, setDataUrl] = useState('');
+  const [isGenerating, setIsGenerating] = useState(true);
+  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 
   useEffect(() => {
     let cancelled = false;
+    setIsGenerating(true);
 
     QRCode.toDataURL(value, {
       width: 128,
@@ -21,28 +25,42 @@ export default function ReceiptQrCode({ value, label }: ReceiptQrCodeProps) {
       errorCorrectionLevel: 'M',
     })
       .then((url) => {
-        if (!cancelled) setDataUrl(url);
+        if (!cancelled) {
+          setDataUrl(url);
+          setIsGenerating(false);
+        }
       })
       .catch(() => {
-        if (!cancelled) setDataUrl('');
+        if (!cancelled) {
+          setDataUrl('');
+          setIsGenerating(false);
+        }
       });
 
     return () => {
       cancelled = true;
     };
   }, [value]);
 
-  if (!dataUrl) return null;
-
   return (
     <div className="receipt-qr-wrapper flex flex-col items-center gap-1 pt-2 border-t dark:border-gray-700">
-      <img
-        src={dataUrl}
-        alt={label ?? 'Transaction verification QR code'}
-        className="receipt-qr-code w-32 h-32"
-        width={128}
-        height={128}
-      />
+      {isGenerating ? (
+        <div
+          role="status"
+          aria-live="polite"
+          className="receipt-qr-loading flex h-32 w-32 items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50 text-[10px] uppercase tracking-wide text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
+        >
+          {prefersReducedMotion ? 'Generating QR code…' : 'Generating QR code…'}
+        </div>
+      ) : dataUrl ? (
+        <img
+          src={dataUrl}
+          alt={label ?? 'Transaction verification QR code'}
+          className="receipt-qr-code h-32 w-32"
+          width={128}
+          height={128}
+        />
+      ) : null}
       <span className="receipt-qr-label text-[9px] text-gray-500 uppercase tracking-wide">
         Scan to verify
       </span>

Dechat/dex_with_fiat_frontend/src/components/__tests__/ReceiptQrCode.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import ReceiptQrCode from '../ReceiptQrCode';
+
+let mockToDataURL: ReturnType<typeof vi.fn>;
+
+vi.mock('qrcode', () => ({
+  default: {
+    toDataURL: vi.fn(),
+  },
+}));
+
+vi.mock('@/hooks/useMediaQuery', () => ({
+  useMediaQuery: () => false,
+}));
+
+describe('ReceiptQrCode', () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    const qrcode = await import('qrcode');
+    mockToDataURL = qrcode.default.toDataURL;
+    mockToDataURL.mockResolvedValue('data:image/png;base64,qr');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders an accessible QR placeholder while the code is generating', async () => {
+    mockToDataURL.mockImplementation(() => new Promise(() => {}));
+
+    render(<ReceiptQrCode value="abc" label="Verify transaction" />);
+
+    expect(screen.getByRole('status')).toHaveTextContent('Generating QR code…');
+  });
+
+  it('renders the generated QR code image once the data URL is ready', async () => {
+    render(<ReceiptQrCode value="abc" label="Verify transaction" />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('img', { name: 'Verify transaction' })).toBeInTheDocument();
+    });
+  });
+});