💚 Increase simulated backend delay to remove test flakiness

The useAsync hook runs before the select component even renders,
so there is some execution time that may cause the 'loading...'
message to never display or too briefly for the testing tools
to pick it up.

.storybook/decorators.tsx

@@ -224,7 +224,10 @@ export const BuilderContextDecorator = (Story: StoryFn, context: StoryContext) =
         componentTranslationsRef: {current: translationsStore},
         getFormComponents: () => context?.args?.componentTree || defaultComponentTree,
         getValidatorPlugins: async () => {
-          await sleep(context.parameters?.builder?.validatorPluginsDelay || 0);
+          const sleepDuration = context.parameters?.builder?.validatorPluginsDelay || 0;
+          console.log(sleepDuration);
+          await sleep(sleepDuration);
+          console.log('returning');
           return context?.args?.validatorPlugins || defaultValidatorPlugins;
         },
         getRegistrationAttributes: async () => {

src/components/builder/validate/validator-select.stories.tsx

@@ -1,6 +1,6 @@
 import {expect} from '@storybook/jest';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
-import {userEvent, waitFor, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/testing-library';
 
 import {withFormik} from '@/sb-decorators';
 
@@ -27,7 +27,7 @@ export default {
       iframeHeight: 200,
     },
     modal: {noModal: true},
-    builder: {enableContext: true, validatorPluginsDelay: 100},
+    builder: {enableContext: true, validatorPluginsDelay: 500},
     formik: {initialValues: {validate: {plugins: []}}},
   },
   args: {
@@ -42,21 +42,22 @@ const Template: StoryFn<typeof ValidatorPluginSelect> = () => <ValidatorPluginSe
 export const Default: Story = {
   render: Template,
 
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
-    const input = await canvas.getByLabelText('Plugin(s)');
+    const input = canvas.getByLabelText('Plugin(s)');
 
     // open the dropdown
-    await input.focus();
+    input.focus();
     await userEvent.keyboard('[ArrowDown]');
 
-    await waitFor(async () => {
-      await expect(canvas.queryByText('Loading...')).toBeInTheDocument();
+    await step('Loading items from backend', async () => {
+      await expect(await canvas.findByText('Loading...')).toBeInTheDocument();
     });
-    // assert the options are present
-    await waitFor(async () => {
-      await expect(canvas.queryByText('Plugin 1')).toBeInTheDocument();
-      await expect(canvas.queryByText('Plugin 2')).toBeInTheDocument();
+
+    await step('Check available options displayed', async () => {
+      // assert the options are present
+      await expect(await canvas.findByText('Plugin 1')).toBeInTheDocument();
+      await expect(await canvas.findByText('Plugin 2')).toBeInTheDocument();
     });
   },
 };