Buttons disappear on page refresh

Here is my view class:

@Component
public class PerksView extends VerticalLayout
`{
//-----------------------------------Class Fields-----------------------------------

private final transient PerksAdapter perksAdapter;
private final transient CDragonService cDragonService;
private final transient RiotStaticDataService riotStaticDataService;

//-----------------------------------Constructor-----------------------------------

@Autowired
public PerksView(PerksAdapter perksAdapter, CDragonService cDragonService, RiotStaticDataService riotStaticDataService)
{
    this.perksAdapter = perksAdapter;
    this.cDragonService = cDragonService;
    this.riotStaticDataService = riotStaticDataService;

    VerticalLayout perksSelectionLayout = perksSelectionLayout();

    add(perksSelectionLayout);
}

//-----------------------------------Toolbar, Perk Selection and Text Field-----------------------------------

//-----------------------------------Toolbar-----------------------------------

//-----------------------------------Perk Selection-----------------------------------

//--------Primary Path--------

private VerticalLayout perksSelectionLayout()
{
    VerticalLayout layout = new VerticalLayout();

    List<PerkPath> primaryPaths = riotStaticDataService.getPerkPathsFromGameVersion("13.11.1", "en_GB");
    HorizontalLayout primaryPathButtons = new HorizontalLayout();
    for (PerkPath primaryPath : primaryPaths)
    {
        String imageUrl = cDragonService.getPerkPathImageURL(primaryPath, "13.11");

        Button button = new Button("", event ->
        {
            // Handle button click event here
            // You can access the selected primary path using 'primaryPath'
        });
        button.addThemeVariants(ButtonVariant.LUMO_ICON);
        button.getElement().getStyle().set("width", "50px"); // Set the desired width of the button
        button.getElement().getStyle().set("height", "50px"); // Set the desired height of the button
        button.getElement().getStyle().set("background-size", "contain");
        button.getElement().getStyle().set("background-repeat", "no-repeat");
        button.getElement().getStyle().set("background-position", "center");
        button.getElement().getStyle().set("border-radius", "50%"); // Set the border-radius to create a circular shape
        button.getElement().getStyle().set("background-image", "url(" + imageUrl + ")");

        primaryPathButtons.add(button);
    }

    layout.add(primaryPathButtons);

    return layout;
}`

This view is used by GuideCreationView:

`@Route(value = “”)
public class GuideCreationView extends VerticalLayout
{
//-----------------------------------Class Fields-----------------------------------

private final transient PerksView perksView;

//-----------------------------------Constructor-----------------------------------

@Autowired
public GuideCreationView(PerksView perksView)
{
    this.perksView = perksView;

    add(perksView);
}

}`

The first time I run the application and head to localhost:8080 every looks fine. Upon refreshing the page or navigating away and then coming back, everything disappears. This will keep happening until I stop and re-start the application. Any ideas why this might be?

PerksView is only annotated with Component, making it a singleton and therefore available for all Views at the same time (which is impossible). You are looking for a reduced scope like prototype to make sure it’s always a new instance once you navigate to your route or something broader like route, or UI scope

I’ve set the annotation on PerksView to this:

@RouteScope @RouteScopeOwner(GuideCreationView.class) public class PerksView extends VerticalLayout {

but now I get this error when I navigate to localhost:8080

There was an exception while trying to navigate to '' with the root cause 'org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.samdobsondev.matchups.gg.view.create.PerksView' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}'

Do I also need to add a specific annotation on the GuideCreationView? As currently I just have:

@Route(value = "") public class GuideCreationView extends VerticalLayout {

Or could the issue be that within GuideCreationView I’m trying to Autowire in PerksView:

`private final transient PerksView perksView;

@Autowired
public GuideCreationView(PerksView perksView)
{
    this.perksView = perksView;

    add(perksView);
}`

Very new to Spring Boot and Vaadin so all these annotations are very confusing haha

https://vaadin.com/docs/latest/integrations/spring/scopes has some examples

Thanks!