Problem with custom Loading Indicator

Flow
1

I created a fresh project via the IntelliJ Vaadin plugin and followed the instructions mentioned here to customize the loading indicator.
I also tweaked the greet service to respond after 10 seconds to force the loading indicator to appear.

It works but with caveats

  1. When I click the button for the first time, the custom indicator appears correctly. However a text saying “Online” also appears on the top left. It disappears after the method returns and the loading indicator is no longer visible
  2. The page now permanently displays a vertical scrollbar which refuses to go away, even if the page is refreshed. Some toying around has indicated conf.setApplyDefaultTheme(false); is the root of the scrollbar.

Custom 1
Custom 13248×2018 175 KB

Custom 2
Custom 23248×2018 174 KB

2

I think you ran into this issue: vaadin-connection-indicator sets popover="manual" causing status message flicker and incorrect positioning · Issue #24072 · vaadin/flow · GitHub

1 Like
3

Update:
I think I have managed to fix both these, thanks to lwilliamson123’s post here

The fix:

.v-status-message {
    display: none;
}

PS. The above mentioned post also demonstrates a neat trick to display a custom label, which I think is a neat UX.