I've been working on a Blazor web app with InteractiveServer render mode, and I've written some code to essentially show a "splash" logo image on my index page, then redirect immediately to the Home page. Everything worked well, untill I noticed that (1) my logo in the NavMenu appeared much smaller than usual, and (2) when I try to go to a different page, it redirects back to the home page!
My guess is that this is due to logic in the index page that redirects to the home after the image animation. I tested this by commenting out the navigation redirect on the Index page, and then there was no issue traversing between the pages (although my NavMenu logo is still small). But how/why is the logic on my index page seemingly loading on every page? My understanding was that it was contained to that single component. For what it's worth, I am using a different menu layout that isn't my default on my index page, but I can't imagine that would have any effect on anything. I've tried to include the relevant code below.
My index page code:
@page "/"@layout TestApp.Components.Layout.NoMenuLayout@inject NavigationManager NavManager@if(showAnimate){<div><Animate Anchor="#b-animate" Animation="Animations.FlipUp" DelayMilliseconds="100"> @if(!hideImage) {<RadzenImage Path="images/Logo.png" Style="width: 100%;" AlternateText="logo" /> }</Animate></div>}@code { private bool showAnimate = false; private bool hideImage = true; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await Animate(); Timer timer = new Timer(1000); timer.Elapsed += (sender, e) => HandleTimer(); timer.Start(); } } private async Task Animate() { if (!showAnimate) { hideImage = false; showAnimate = true; await InvokeAsync(StateHasChanged); } else { showAnimate = false; } await InvokeAsync(StateHasChanged); } private void HandleTimer() { NavManager.NavigateTo("/home"); }}My Profile page, the page I tried to navigate to from the Home page:
@page "/profile"<MainHeader Header="User Profile"></MainHeader><div>//Profile demographic stuff</div>@code {//Stuff}My home page:
@page "/home"<MainHeader Header="Welcome!"></MainHeader>@if (IsLoading){ //Loading<div class="text-center"><MatProgressBar Indeterminate="true"></MatProgressBar></div>}else{ // Grid Stuff}@code{ public bool IsLoading { get; set; } string value = ""; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { IsLoading = true; StateHasChanged(); //Load Stuff IsLoading = false; StateHasChanged(); } }}My main layout code:
@inherits LayoutComponentBase<div class="page"><main><div class="top-row px-4"><img src="/images/Biglogo.png" style='padding-top: 1ch ;padding-bottom: 1ch; height: 100%; width: 100%; object-fit: contain'></div><div><NavMenu /></div><article class="content px-4"> @Body</article></main></div><div id="blazor-error-ui"> An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss">🗙</a></div><RadzenComponents @rendermode="InteractiveServer" />And if it is needed, my Routes code:
<Router AppAssembly="typeof(Program).Assembly"><Found Context="routeData"><RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" /><FocusOnNavigate RouteData="routeData" Selector="h1" /></Found></Router>@rendermode InteractiveServer