So far in our series, we’ve  walked through the intro,  wrote our first component,  dynamically updated the HTML head from a component, and  isolated our service dependencies.

It’s time to address the elephant in the room—why is the image loading so slow?

There’s a few reasons for that. First, we have to wait for the app to load when we refresh the page–and with Blazor WebAssembly, we’re waiting for the .NET runtime to load. On top of that, we’re calling off to a REST API, getting the image source, and sending that to our view. That’s not incredibly efficient.

In this post, we’re going to correct both issues. We’ll first move the Image component to its own page, then we’re going to use a persistence layer to store and work with our images. This includes hosting our images on Azure Storage and accessing its details using the Azure Cosmos DB serverless offering. This will only help us as we’ll create components to search on and filter our data.

This post contains the following content.

• Move our Image component to its own page
• Create a new Home component
• Integrate Cosmos DB with our application
• Update the API
• Update the client app
• Update our tests
• Wrap up

#webassembly #blazor