How to take a screenshot of a loading spinner in playwright(ts / js)?

Question

I have a button that after clicked will show the spinner with a 750ms delay, I want to capture the loading spinner to test the UI, I try bunch of methods but didn't work at all, the issues is after clicked it will loading and go the next page, the screenshot take the screenshot of next page, which is not my expected, here is my test code:

    test.only('should show loading spinner for continue button', async ({ page }, testInfo) => {
      await page.route('**/*', async (route) => {
        await new Promise((f) => setTimeout(f, 1000));
        await route.continue();
      });
      const inputs = page.locator('#username');
      const continueButton = page.locator('form[data-form-primary] button[type=submit]');
      await continueButton.click();
      await expect(continueButton).toHaveScreenshot(testName('invalid', testInfo));
      await inputs.focus();
      await inputs.type('[email protected]');
      await expect(inputs).toHaveScreenshot(testName('typing', testInfo));
      await continueButton.click();
      // always finish loading before capture the spinner screenshot.  how can take the screenshot when the spinner is spinning? 
      // await page.pause();
      await page.waitForTimeout(750);
      await expect(page).toHaveScreenshot(testName('spinner', testInfo), {
        fullPage: false,
        animations: 'allow',
      });
    });

Is there any methods that can take the screenshot when click the button at the same time ? Because after the second click for await continueButton.click();, it already finished loading and jump to the next page