I was working on a project and wanted an original way of showing the user the application was loading besides using the normal "Loading...." text. I came across a website page and thought I could refactor that into what I was looking for.
When my application starts, it displays a full-screen image with a count down while the page loads. As a special effect, I want to unblur the image the closer it gets to the applicaiton finishing loading. Once the teh count down is done, we pause for 1 sec, for effect, then proceed to the application.
I think it turned out pretty cool. See the demo here.
I used the server side Blazor project template in my example, but the code should work on any Blazor template.
Template changes
1. Rename the original Index.razor page to "home". Besure to change the routing at the top of the page as well.
@page "/home"
2. Create a new Index.razor page
a. Add routing
@page "/"
@page "/index"
We will need to do this so we can re-display the loading once the application starts.
3. Add HTML to the index page:
<div class="blur_body">
<section class="bg" style="@filtering"></section>
<div class="loading-text" style="@opcityFilter">@LoadCounter%</div>
</div>
As you can see we will be dynamicly changing style at run time and incurmenting the counter.
4. Add an index.razor.css file. This will hold the specific CSS for our page. this is where we put the source of the back ground image.
5. Create a blank Layout razor file
@inherits LayoutComponentBase
@Body
We will need this so our index page does not have the main layout assoicated with it.
6. Add a new menu element to reload the loading page.
<li class="nav-item px-3">
<NavLink class="nav-link" href="index">
<span class="oi oi-list-rich" aria-hidden="true"></span> Show loading again
</NavLink>
</li>
Coding
This is the fun part. We will be using a timer, the Navigration Manager and our Blanklayout.
Timer
We need to set our timer to go from 0 - 99, increasing very 30 seconds. For your application, you can do different things to see the real progress of your app starting, such as application state, eventing, or data checking.
On each increment of the timer we will need to:
1. Increate the counter
2. against the opacity of the background image
3. Filter value for the style in the HTML
4. Check to see if the count is at 99 yet.
5. If the counter is at 99
a. Stop the timer
b. pause for 1 sec, I just put this in for the demo and I liked it.
c. Navigate to the new "home" page.
On each timer interval, we will need to call the timer increment method and then refresh the screen. A timer runs on a non-UI thread, so we will need to call:
InvokeAsync(() => StateHasChanged());
OnAfterRender
To initialize the timer we will need to add some code to the After Render method. We will need to check and only execute the timer set up on the first render.
if (firstRender)
{
timer = new Timer();
timer.Interval = 30;
timer.Elapsed += OnTimerInterval;
timer.AutoReset = true;
// Start the timer
timer.Enabled = true;
}
This is to ensure we only have a single-timer instance.
Dispose
We will need to implement the Dispose method since we are using a timer. We just need to check if the timer is null before calling Dispose.
Set Scale value
We need to be able to provide s smooth "unbluring" of the image. To do this we need. And of course, I found the best method to do this on
StackOverFlow. This single line of code will provide a very smooth transition.
private decimal Scale(int num, int in_min, int in_max, int out_min, int out_max)
{
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
}
Summary
Does not seem much to it, but I think it is very cool. I did think of making it a component but felt that was a little overkill for it. I am not sure how often I will be using this, but it is good to have it if I need it.
Comments
Post a Comment