HSNAKDValidation Labhakdogan.com

Advanced

Slow backend handling

A 3-second backend delay must show a skeleton state, not a blank page; user input must not be lost.

User story

As a user on a slow connection, I want to see clear loading affordances and not lose my input while the page hydrates.

Acceptance criteria

  • Skeleton appears within 100ms
  • Form state is preserved during the wait
  • After the response, skeleton is replaced cleanly
  • Submit is disabled during the wait

Manual test steps

  1. 1.Set up a 3s delay on the route
  2. 2.Open /wallet
  3. 3.Type 250 into the deposit field while loading
  4. 4.Wait for hydration

Expected result

After 3s the field still contains 250 and the deposit button enables.

Possible bug risks

  • Skeleton disappears before data arrives, flashing empty UI
  • Form input gets reset on hydration
  • Submit button enables despite the missing data

Reference Playwright spec

slow-backend.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
11
12
import { test, expect } from '@playwright/test';

test('slow backend keeps the input hot', async ({ page }) => {
  await page.route('**/api/ledger/balance', async (route) => {
    await new Promise((r) => setTimeout(r, 3000));
    await route.fulfill({ status: 200, body: JSON.stringify({ balance: 2840.55 }) });
  });

  await page.goto('https://lab.hakdogan.com/wallet');
  await page.getByLabel(/^deposit$/i).fill('250');
  await expect(page.getByLabel(/^deposit$/i)).toHaveValue('250');
});