ProgressIndicator and shading with the message ".. wait ... loading ..."

Welcome!

I propose to look at the sequence of operations with the GUI, as shown in the form of a set of pictures will be clearer, so are the problems I encountered.

Thus, the user selects a certain type of custom chart -
11891.png

Then, a window appears with the settings where you can configure -
11892.png

Since settings are stored in the database, the software is constructed sql request which is then executed. Sometimes it takes a lot of time over which we can see ProgressIndicator in the lower right corner of the canvas -
11893.png


11894.png

It takes a lot of time … the user can not interact with other controls (which, in essence, in this case is the preferred option )…

Question.
It is possible, whether to cover the duration of the long-running operation with ProgressIndicator and
shading (shade)
and put in the center or corner post with a request to wait a while?

Thanks.
11895.png

I suggest you use a separate modal sub-window that contains a ProgressIndicator. That will block any other user actions for the duration of the long operation. You need to use a separate Thread then for the background process, and let the ProgressIndicator poll for the changes and see when the operation is finished and then remove the modal sub-window.

HTH,
Jouni

I welcome you, Jouni Koivuviita!

Whew! Great idea! That’s what I do, I will describe all the details here.
Thank you very much!

Thank you very much, Jouni Koivuviita!


...
public class BlockerWindow extends Window {
   public BlockerWindow() {	    
       this.setResizable(false);
       this.setDraggable(false);	    		
       this.setModal(true);
       this.center();
       this.setStyleName("loading-window");
       this.setClosable(false);		

       setWidth("300px");
       setHeight("80px");
		
       ProgressIndicator loadingIndicator = new ProgressIndicator();
       loadingIndicator.setStyleName("preload-spinner");
		
       VerticalLayout mainLayout = new VerticalLayout();
       mainLayout.setSizeFull();
       mainLayout.setMargin(true);
       mainLayout.setSpacing(true);
       mainLayout.addComponent(loadingIndicator);
       mainLayout.setComponentAlignment(loadingIndicator, Alignment.MIDDLE_CENTER);
				
       this.setContent(mainLayout);		
	}
}
...

...
       tableBtn = new Button("Таблица");
       tableBtn.addListener(new ClickListener() {
          public void buttonClick(ClickEvent event) {				
				
             blockerWindow = new BlockerWindow();
             mainWindow.addWindow(blockerWindow);				
				
            Thread workThread = new Thread() {
               @Override
               public void run() {
                  GenericWindow genericWin = new GenericWindow<TableWindow>(
                    new TableWindow(
                           container, 
                           userWorkSpace, 
                           selectedTab, 										
                           currentOpenedWindows,											
                           pool,
                           paramSettersWnds
                          ), 
                        container, 
                        screenWindow,  
                        selectedTab, 
                        userWorkSpace, 
                        currentOpenedWindows, 						 					 
                        pool,
                        paramSettersWnds
                      );
                  
                  ParamSetterWindow paramSetterWindow = new ParamSetterWindow(selectedTab, userWorkSpace, screenWindow, null, genericWin, 
                         windowsNameWorkspace, pool, container, "Настройка таблицы", paramSettersWnds);
		    	
                   ArrayList<Window> charts = (ArrayList<Window>)userWorkSpace.get(selectedTab.hashCode());
                   ArrayList<Window> chartRefresh = null;
						
                  if(null != charts) { 
                     chartRefresh = charts;
                  } else {
                     chartRefresh = new ArrayList<Window>();
                  }

                  chartRefresh.add(paramSetterWindow);						
                  userWorkSpace.put(selectedTab.hashCode(), chartRefresh);								
                     
                  addWindow(paramSetterWindow);
                  mainWindow.removeWindow(blockerWindow);
            }														
       };					

      workThread.start();
    }
 });
...

...
.v-window-loading-window .v-window-outerheader {
    height: 0;
    margin-left: 0;
    padding: 0;
}
...

11924.png
11925.png