testCafe slowing the tests down after fileUpload

Question

I am automating a data capture form. The first element of this form is an image file upload control & I'm uploading a 5KB image. But after this step, the test executes the next step which is writing a text into a textbox & then it halts for nearly 30 seconds. How to reduce this un-necessary wait?

    test('Test 1', async t => {
  await listingPage.uploadImage();
  await listingPage.listAnItem();
  ..

Upload image code

  async uploadImage() {
    await t.setFilesToUpload(this.imageInput, ['../../uploads/photo02.jpg']);
  }

** Data entry code block **

async listAnItem() {
    await t
      .typeText(Selector('#description'), this.DESCRIPTION) /* --> Application is slowing after this step */
      .click(this.categorySelect)
      .click(Selector('#react-select-2-option-0-0'))

.testcaferc.json file

{
    "browsers": [ "chrome", "safari" ],
    "remoteChromeVersion": "80",
    "src": "specs",
    "reporter": [
      {
        "name": "spec"
      }
    ],
    "speed": 1,
    "debugOnFail": false,
    "skipJsErrors": true,
    "selectorTimeout": 20000,
    "assertionTimeout": 20000,
    "pageLoadTimeout": 8000
  }

DOM Snippet of file-upload

<input aria-describedby="error__images" aria-label="Upload an image" tabindex="0" type="file" multiple="" accept="image/jpeg, image/png" data-testid="imageInput" class="ImageInputstyles__Input-sc-2l692w-7 aosWu">

Answer 1

The issue itself was not due to the Upload files control. Issue was occuring, due to a drop-box, (after uploading file), which was dynamically updating another drop-box that had values populated dynamically based on the value selected in the first drop-down.

Rewriting the drop-down operation something like below resolved the issue:

  async fillSubCategoryFields(catType = 'CAT_NAME') {
await t
  .click(this.categorySelect, { timeout: 50 })
  .click(Selector('.listingSelect__option').withText(catType));

}