I have a UI that displays a list of features in a drop-down list. I render the function based on the user selection from the drop-down list. Upon landing, I keep the drop-down menu disabled until I get data from Ajax.
So that's the river –
* The user lands on the page. The feature selection drop-down menu is disabled.
* Once loading is complete, I will send an Ajax call to receive the data.
* Once this data has been retrieved, I activate the drop-down list.
* The user then selects a function from the drop-down list.
* This function is rendered.
* The user can select any function from the drop-down list at any time.
* Due to some user interactions, I need to re-launch the Ajax call and disable the dropdown until then, so I can recalculate on the server side which features will all be shown in the drop-down menu.
* The cycle continues.
Why am I waiting for data to activate the dropdown?
Because the feature list that is displayed needs data to render. This data is received via an Ajax call that I trigger after landing. The data is a card with the key "featureName". Value is the object that contains the information needed to render that feature. Therefore I would like to activate the dropdown menu only if all data for the features to be rendered is available to me.
I tried to implement this, but it gets very messy.
Disassemble the components that I want to implement in a clean way –
* Save the corresponding data of each feature I receive through an Ajax call.
* After receiving the data, activate the drop-down list.
* If another Ajax call is required, disable the drop-down menu.
* If the user selects a function, edit the corresponding data of this function and render this function.
I think about the flow pattern where my first action would be when data is received from the Ajax call. Thereafter, the other actions will come from the UI, depending on which feature the user has requested to render. This approach does not look good either.