Here is the definition of a particular page on my web app:
@Route(value = "game", layout = MainLayout.class)
@PageTitle("Page Title")
@StyleSheet("./my-styles/game.css")
@JavaScript("./js/game.js")
@Log4j2
@PreserveOnRefresh
public class GamePage extends VerticalLayout {
And here is MainLayour:
@Theme(value = Lumo.class, variant = Lumo.DARK)
@StyleSheet("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Rubik:wght@300&family=Roboto")
@StyleSheet("./my-styles/game.css")
@JavaScript("https://kit.fontawesome.com/829bed66ec.js")
@Push
public class MainLayout extends Div implements RouterLayout, PageConfigurator {
I notice that when I navigate to this page from the signin page:
@Route(value = "", layout = MainLayout.class)
@PageTitle("Page Title")
@Log4j2
public class SignInPage extends VerticalLayout {
the css (game.css) loads fine. But when I’m on the game page and hit refresh in my browser, that css is dropped. Removing @PreserveOnRefresh fixes this, but it seems to be a nice feature to help the UI stay consistent over refreshes.
Any tips on how I can fix this?