Poor performance of add product modal with lots of products

Description

WIth more than 2000 NFS in the system, the add product modal becomes unresponsive. Opening the dropdown with products takes around a second and adding the product to a requisition takes a couple of seconds.

The slowness was noted on:

  • Initiating the form

  • Selecting the category on the NFS tab

  • Selecting the Product drop-down to enable selection of the product

  • Clicking "Add Product" so that the item could be added on the form. This was the most substantial lag

  • The form syncing before the user can click "Add product" again to add another item.

Notes
The current modal is in the attachments: no-throttle-no-fix.gif

Future modal is in the attachments: x6-throttle-with-fix.gif

The cause of the poor performance is most likely that we're rendering all the options in the DOM, which could be solved by using select2 pagination feature.

Acceptance Criteria

  1. Update add-full-supply-product-modal:

    • change the name to select-products-modal,

    • rework it so it accepts a list of orderables and returns a list of selected ones,

    • remember to rework the uses of this modal.

  2. Rework current process for adding non-full supply products:

    • reuse the select-products-modal,

    • remove the add-product-modal component if it is not used anywhere.

Status

Assignee

Nikodem Graczewski

Reporter

Jakub Kondrat

Story Points

5

Time tracking

24h

Epic Link

Components

Sprint

None

Fix versions

Priority

Critical
Configure