CODEWITHSUNDEEP
javavaadinvaadin8
Eloise
Eloise

Reputation: 539

Load the UI and only render a component (grid) when data is ready

I'm trying to load the UI except my grid because it taking too much time. I want to load my UI, and then, when my grid data is ready, I want to show it.

On my UI, I have a combo box. When the user select it, the grid will change and have other data. Currently :

  1. the user select the combo box
  2. I have a progress bar at the top, the UI didn't change
  3. When The dataprovider have the data, the UI change and the grid take the new information.

What I would like :

  1. The user select the combo box
  2. The UI change, I can only see the combo box (and optionally, the empty grid)
  3. when the dataprovider have the data, it fill the grid.

My code is : 

regionSelection = new ComboBox<>(IStringConstants.REGION_COMBO_LABEL);
regionSelection.setItems(InstanceUtil.getRegions());
regionSelection.setSelectedItem(Regions.EU_CENTRAL_1.getName());
regionSelection.setEmptySelectionAllowed(false);
regionSelection.addValueChangeListener(new HasValue.ValueChangeListener() {
    private static final long serialVersionUID = -5188369735622627751L;

    public void valueChange(HasValue.ValueChangeEvent event) {
refreshGrid();
    }
});
instanceGrid = new Grid<>();
instanceGrid.addColumn(instance -> InstanceUtil.getTagName(instance)).setCaption(IStringConstants.TAGS_LABEL).setId(IStringConstants.TAGS_LABEL);
instanceGrid.addColumn(Instance::getInstanceId).setCaption(IStringConstants.ID_LABEL).setId(IStringConstants.ID_LABEL);
instanceGrid.addColumn(Instance::getInstanceType).setCaption(IStringConstants.TYPE_LABEL);
instanceGrid.addColumn(instance -> instance.getPlacement().getAvailabilityZone()).setCaption(IStringConstants.ZONE_LABEL);
instanceGrid.addColumn(instance -> instance.getState().getName()).setCaption(IStringConstants.STATUS_LABEL).setId(IStringConstants.STATUS_LABEL);
instanceGrid.addColumn(Instance::getPublicIpAddress).setCaption(IStringConstants.IPV4_LABEL).setId(IStringConstants.IPV4_LABEL);

instanceGrid.addColumn(Instance::getKeyName).setCaption(IStringConstants.KEY_NAME_LABEL).setId(IStringConstants.KEY_NAME_LABEL);
instanceGrid.addComponentColumn(this::buildDeleteButton);
ListDataProvider<Instance> dataProvider =DataProvider.ofCollection(ec2Client.getInstances());

instanceGrid.setDataProvider(dataProvider);
layout.addComponent(regionSelection);
layout.addComponent(instanceGrid);

Any hint will be appreciate.

EDIT, what I tried without success: 

@Asynchronous
private void async(){
    ListDataProvider<Instance> dataProvider =
            DataProvider.ofCollection(ec2Client.getInstances());
    instanceGrid.setDataProvider(dataProvider);
}

Runnable task = () -> getUI().access(() -> {
    ListDataProvider<Instance> dataProvider =DataProvider.ofCollection(ec2Client.getInstances());
    instanceGrid.setDataProvider(dataProvider);
});
Executors.newSingleThreadExecutor().submit(task).isDone();

I tried too : 

ListDataProvider<Instance> dataProvider = new ListDataProvider<>(null);

dataProvider = DataProvider.ofCollection(ec2Client.getInstances());
instanceGrid.setDataProvider(dataProvider);

dataProvider is defined has a member variable

Upvotes: 1

Views: 623

Answers (1)

pirho
pirho

Reputation: 12215

There seems not to be anything like DataReadyListener for DataProvider which would help this this approach to the problem i think.

But if i simplify your problem a bit and forget all about async and such stuff AND stick only in the following "requirements". Could you try this:

What I would like :

  1. The user select the combo box
  2. The UI change, I can only see the combo box (and optionally, the empty grid)

Create dataProvider with empty Collection<Instance>s. Set that as grids DataProvider. It should empty the grid.

ArrayList<Instance> emptyList = new ArrayList<Instance>();
ListDataProvider<Instance> emptyDataProvider = new ListDataProvider<>(emptyList);
instanceGrid.setDataProvider(emptyDataProvider);

Righ after that do as you do now. Create the actual DataProvider and set that as grids data source, for example:

ListDataProvider<Instance> dataProvider =
        DataProvider.ofCollection(ec2Client.getInstances());
instanceGrid.setDataProvider(dataProvider);
  1. when the dataprovider have the data, it fill the grid

Hopefully it does just this. But there will not be any old data in the grid even if it did not wait until data ready.

This will not help to get rid of the progress bar i think. But not sure if it even would be a good idea.

This can also be applied to initial page load if needed for some default data or then the Collection<Instance> for DataProvider can just be empty initially and load triggered only when combo selected explicitly.

Upvotes: 2

Related Questions