Improving the user experience of the project section #94
Conversation
…r storage This commit introduces a crucial enhancement to our Blazer application's functionality. By leveraging the @Attribute [StreamRendering(true)] directive, we've enabled automatic loading of projects directly from the indexer if they are not found in the browser storage. This ensures a seamless experience for users, even if they haven't explicitly saved their projects locally. This improvement streamlines the user journey, reducing friction and enhancing overall usability.
src/Angor/Client/Pages/Browse.razor
Outdated
| @@ -11,6 +11,7 @@ | |||
| @inject NavigationManager NavigationManager | |||
| @inject IRelayService _RelayService | |||
| @inject IIndexerService _IndexerService | |||
| @attribute [StreamRendering(true)] | |||
There was a problem hiding this comment.
Can this be explain more? I don't immediately see how it helps with fetching from indexer.
@DavidGershony thoughts?
There was a problem hiding this comment.
In Blazor, the @attribute [StreamRendering(true)] is used to enable streaming rendering for a specific Razor component. This attribute is particularly useful for optimizing the rendering process of Blazor components, especially when dealing with large amounts of data or complex UI structures.
Streaming rendering allows the server to send UI updates in smaller chunks rather than waiting for the entire component to render completely. This means that users can see parts of the UI rendered and become interactive sooner, while the rest of the UI continues to load and render in the background. This can significantly improve the perceived performance and responsiveness of your application.
Here's how it works:
-
Server-Side Blazor: In server-side Blazor applications, this attribute allows the component to be rendered in a streaming fashion from the server to the client over a SignalR connection. This helps in reducing the initial load time and improving the interactivity of the application.
-
WebAssembly Blazor: While this attribute is more relevant to server-side Blazor, in client-side scenarios (WebAssembly), the concept doesn’t apply as strictly, since the entire rendering process occurs in the browser. However, it can still be beneficial in scenarios where components are fetched dynamically.
Using this attribute can be especially beneficial in scenarios where you have components that take a significant amount of time to render due to complex calculations or data processing. By enabling streaming rendering, the user experience becomes smoother as parts of the UI are displayed as soon as they are ready.
src/Testing/e2e/browse.cy.js
Outdated
| @@ -11,8 +11,8 @@ describe('browseProjectsSpec', { retries: 3 }, () => { | |||
| var testNostrId = 'npub1upnev99qsx4haf0yq8jtkny8yr45c94yw42g7rkdgr4ewgv3sh2shmuxnk' | |||
| it('browseBasic', () => { | |||
| cy.clickOnNavBar(Navbar.BROWSE) | |||
| cy.get(`[data-cy=${BROWSE_DATA_CY.PROJECT_GRID}]`).contains(ERROR_MESSAGES.NO_PROJECTS_FOUND) | |||
| cy.clickElementWithDataCy(BROWSE_DATA_CY.FIND_BUTTON) | |||
| // cy.get(`[data-cy=${BROWSE_DATA_CY.PROJECT_GRID}]`).contains(ERROR_MESSAGES.NO_PROJECTS_FOUND) | |||
There was a problem hiding this comment.
@itailiors check this out please
There was a problem hiding this comment.
it seems fine,
@miladsoft correct me if im wrong, it seems that you fetch automatically when you load the browse page.
(I can specify the cypress test for that when PR is merged)
also i think that whenever you search a project that does not exist (for example 'aaaaaa') you should be presented with something that tells you that the project was not found (like the element that fetch projects had that you removed)
There was a problem hiding this comment.
Yes . You are right . I will add it.
|
It seems StreamRendering is a server-side feature not client side In wasm we don't wait for the server to provide the page content we build it ourselves in the browser so no need to stream anything (if I understand correctly) Do you see a difference between with or without StreamRendering? |
|
@dangershony You're right that StreamRendering is mainly for server-side Blazor. We’re not using server-side Blazor, but we do fetch data from external sources like Nostr relay and the indexer, which can take time. I used StreamRendering(true) to try and make parts of the UI interactive sooner while waiting for data, similar to how JavaScript fetches data asynchronously after the page loads. In WebAssembly Blazor, it doesn’t have the same impact but still helps with progressively enhancing the UI. We can also look at lazy loading components or using state management to improve performance. |
|
I am not sure it helps at all because we already render Nostr responses as they arrive. |
|
@itailiors any chance you can fix the test on this PR? or if you prefer once I push you make a following PR with a fix? |
This commit introduces a crucial enhancement to our Blazer application's functionality. By leveraging the
@attribute [StreamRendering(true)]directive, we've enabled automatic loading of projects directly from the indexer if they are not found in the browser storage. This ensures a seamless experience for users, even if they haven't explicitly saved their projects locally. This improvement streamlines the user journey, reducing friction and enhancing overall usability.