I have a UI where I show a list of features in a dropwdown. Based on user selection from the dropdown, I render the feature. On landing I keep that dropdown disabled until I receive some data from ajax call.
So this is the flow -
* User lands on the page, dropdown for selecting features is disabled.
* Once loading completes, I send an ajax call to receive the data.
* Once that data is obtained, I enable the dropdown.
* User then selects a feature from the dropdown.
* That feature is rendered.
* At any time user can select any feature from the dropdown.
* Based on some user interaction, I will need to fire the ajax call again & disable the dropdown until then, so that I recalculate again on the server side which all features to be shown inside the dropdown.
* Cycle continues.
Why am I waiting for data to enable the dropdown?
Because the feature list which is being shown requires some data for getting rendered. That data is received using ajax call which I trigger after landing. The data is a map where key is featureName & value is the object which will have necessary information to render the corresponding feature. Hence, I don't want to enable dropdown until I have all the data for the features to be rendered.
I tried implementing this but it's getting very messy.
Breaking down the components which I am trying to implement in a clean way -
* Store each feature's corresponding data which I am getting through ajax call.
* On receiving the data, enable the dropdown.
* When another ajax call is required, disable the dropdown.
* When user selects 1 feature, do some processing on that feature's corresponding data & render that feature.
I am thinking about flux pattern where my first action would be when data is received from the ajax call & after that the further actions would come from UI depending on which feature user has asked to render. This approach is also not looking good.