Can't avoid Default LoadingIndicator on the Initial Response

Flow
1

In this example my Custom LoadingIndicator appears over the Default one at the very first time execution, as you can see from the attached Gif.
Following my source code (Tested on Vaadin 13.0.2), almost all from the official Docs.
I hope someone can tell me where I’m wrong.
Thanks in advance.

@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
@HtmlImport("styles/common.html")
public class MainView extends VerticalLayout implements PageConfigurator {
    Button button = null;    
    public MainView() {
        button = new Button("First Time Click",
                event -> {
                	try {
						Thread.sleep(3000);
	                	Notification.show("Clicked!");
	                	button.setText("After First Time Click");
					} catch (InterruptedException e) {
						e.printStackTrace();
					}
                });
        add(button);
    }
	public void configurePage(InitialPageSettings settings) {
        LoadingIndicatorConfiguration conf = settings.getLoadingIndicatorConfiguration();
        conf.setApplyDefaultTheme(false);		
	}	
}

<custom-style>
    <style>
		.v-loading-indicator {
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  pointer-events: auto;
		  z-index: 2147483647;
		}
		.v-loading-indicator:before {
		  width: 76px;
		  height: 76px;		
		  position: absolute;
		  top: 50%;
		  left: 50%;		
		  margin: -38px 0 0 -38px;		
		  border-radius: 100%;
		  animation: bouncedelay 1.2s infinite 0.4s ease-in-out both;
		  content: "";
		}		
		.v-loading-indicator.first:before {
		  background-color: skyblue;
		}		
		.v-loading-indicator.second:before {
		  background-color: salmon;
		}		
		.v-loading-indicator.third:before {
		  background-color: red;
		}		
		@keyframes bouncedelay {
		  0%, 80%, 100% {
		    transform: scale(0);
		  } 40% {
		    transform: scale(1.0);
		  }
		}        		
    </style>   	
</custom-style>

17585498.gif