RouterLayout causing page refresh?

Flow
1

Hi all,
I’m quite new to Vaadin, using Vaadin 13 with Chrome on OpenJDK 11/64 under Windows 7 and TomEE 8…
I did an ApplicationLayout within a RouterLayout class called MyApplicationLayout, implementing “Nested Layouts in Flow” according to the “official” tutorial (by Sven, great stuff!). Calling this from various components with @Route(value=“abc”, layout=MyApplicationLayout.class) works exactly as hoped for but for one observation:

  • The page flickers. It gets refreshed after each URL change.

Is this “to be expected” or did I miss something? It goes without saying that this behaviour badly hampers user experience…
Any help greatly appreciated!
Kind regards, Bernhard
PS: I’ve just learned from this forum that chrome does not accept cookies from localhost, so I tried 127.0.0.1:8080 instead… same effect.

2

Hi Bernhard,

I suspect its not meant to behave like that :slight_smile:

Have you tried it in another browser? Same effect?

Do you have any code in the navigation events?

Stuart

3

Hi,

I think your problem is when you navigate from one route to another route with a different layout, then the page is refreshed.

If you navigate from 2 routes with the same parent layout then the page won’t be refreshed completely.

Is it your use case ?

4

Thank you for your fast replies!
“Full Page Flicker” occurs in both Chrome 72.0.3626.121 (Official Build) (32-Bit) and Firefox Quantum 58.0.2 64 bit.
Yes, I use the same layout class from two different routes.
It would be great if this could be resolved!
Kind regards,
Bernhard

PS:
To clarify, this is my code structure:

public class ConfigurationApp extends VerticalLayout implements RouterLayout {
	// some local variables
	public ConfigurationApp() {
		AppLayout appLayout = new AppLayout();
		// appmenu goes here...
		VerticalLayout mainLayout = new VerticalLayout();
		HorizontalLayout mainAreaLayout = new HorizontalLayout();
		leftTree = new ...
		mainArea = new Div(); **// This is route-dependent, see below showRouterLayoutContent**
		mainAreaLayout.add(leftTree,mainArea);
		mainLayout.add(mainAreaLayout);
		// button lines go here...
		appLayout.setContent(mainLayout);
	}
	
	@Override
	public void showRouterLayoutContent(HasElement hasElement) {
		if (hasElement != null) {
			Element newElement = hasElement.getElement();
			if (newElement != null) {
				**// this is where I set the new content**
				mainArea.removeAll();
				mainArea.getElement().appendChild(newElement);
			}
		}
	}
}

@Route(value="route1", layout=ConfigurationApp.class)
public class Route1 extends VerticalLayout {
	private static final long serialVersionUID = 1L;
	public Route1() {
		add(new Span("I am Route1"));
	}
}

@Route(value="route2", layout=ConfigurationApp.class)
public class Route2 extends VerticalLayout {
	private static final long serialVersionUID = 1L;
	public Route2() {
		add(new Span("I am Route2"));
	}
}
5

Has there been any progress on this? I am seeing a very similar issue. I have a nearly identical router layout and after page load the or on click of items the page just start refreshing some number of times. The number of refreshes is different all the time and it doesn’t always happen on page load but it does always happen on click of anything in the page.

6

After some trial and error and lots of googleing it looks like in my case I was missing the the @UIScope and @SpringComponent annotations on the abstract class that extended VerticalLayout.

7

Ok, turns out my above comment is not the solution. I deployed to another server and the constant refresh started again. I have posted a question related to this on stack overflow as well https://stackoverflow.com/questions/59000652/spring-boot-app-with-vaadin-ui-constantly-refreshing-screen

I really wish someone from Vaadin would comment on anything. I have been asking questions on several forums for weeks and they evidently don’t care about people having a bad experience with there product.

8

After reading the fiollowing:
https://vaadin.com/blog/microservices-high-availability
https://vaadin.com/blog/session-replication-in-the-world-of-vaadin
it is apparent that I need to come up with a solution that either uses sticky session or some sort of shared session management.

9

Same problem here, a new instance of MainLayout class keeps creating.

10

@Vikrant, There are three possibilities here: 1. If you have access to change the load balancer to use sticky sessions then do that, but keep in mind it may have a performance impact. 2. Create the Vaadin app as a stand alone and deploy only a single instance of it and call the distributed web service endpoints to get the relevant data.

I also tried using the Redis shared sessions but the overzealous serialization causes even more issues.