Add missing skeleton loading to product page of Boilerplate (#9773)#9774
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request updates the loading indicators on both the HomePage and ProductPage. The previous simple loading animations have been replaced with structured skeletons using components like BitCard, BitStack, and BitShimmer. In addition, a 2000ms delay has been introduced in the HomePage's LoadProducts method under conditional compilation, and a new CSS rule sets the width of a product container to 100%. The ProductController’s cache purge parameters have also been updated to reference a revised API endpoint pattern. Changes
Sequence Diagram(s)sequenceDiagram
participant HP as HomePage
participant LP as LoadProducts
participant PVC as ProductViewController
HP->>LP: Call LoadProducts(request)
LP->>LP: Wait 2000ms delay
LP->>PVC: Request products
PVC-->>LP: Return product list
LP-->>HP: Return products for display
sequenceDiagram
participant PP as ProductPage
participant PD as ProductData
PP->>PP: Evaluate isLoadingProduct flag
Note right of PP: Show skeleton loader (BitCard, BitShimmer, etc.)
PP->>PD: Request product details
PD-->>PP: Return product details
PP->>PP: Render product information
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs (2)
81-81: Consider using Url.Action for URL generation.While the URL pattern is now more explicit, using string literals for URLs can be fragile. As suggested in the comment, consider using
Url.Actionto generate the URLs, which would make the code more maintainable and less prone to errors when routes change.Example implementation:
- await responseCacheService.PurgeCache("/", $"product/{dto.Id}", $"api/ProductView/Get/{dto.Id}" /*You can also use Url.Action to build urls.*/); + await responseCacheService.PurgeCache( + Url.Action("Index", "Home")!, + Url.Action("Index", "Product", new { id = dto.Id })!, + Url.Action("Get", "ProductView", new { id = dto.Id })! + );
97-97: Extract duplicated URL patterns to constants or helper method.The same URL patterns are duplicated between Update and Delete methods. Consider extracting these to constants or a helper method to follow the DRY principle.
Example implementation:
+ private const string HOME_URL = "/"; + private const string PRODUCT_URL_FORMAT = "product/{0}"; + private const string PRODUCT_VIEW_URL_FORMAT = "api/ProductView/Get/{0}"; + + private (string homeUrl, string productUrl, string productViewUrl) GetCacheUrls(Guid productId) + { + return ( + HOME_URL, + string.Format(PRODUCT_URL_FORMAT, productId), + string.Format(PRODUCT_VIEW_URL_FORMAT, productId) + ); + } public async Task<ProductDto> Update(ProductDto dto, CancellationToken cancellationToken) { // ... existing code ... - await responseCacheService.PurgeCache("/", $"product/{dto.Id}", $"api/ProductView/Get/{dto.Id}"); + var (homeUrl, productUrl, productViewUrl) = GetCacheUrls(dto.Id); + await responseCacheService.PurgeCache(homeUrl, productUrl, productViewUrl); // ... existing code ... } public async Task Delete(Guid id, string concurrencyStamp, CancellationToken cancellationToken) { // ... existing code ... - await responseCacheService.PurgeCache("/", $"product/{id}", $"api/ProductView/Get/{id}"); + var (homeUrl, productUrl, productViewUrl) = GetCacheUrls(id); + await responseCacheService.PurgeCache(homeUrl, productUrl, productViewUrl); // ... existing code ... }src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/ProductPage.razor (2)
20-31: LGTM! Consider semantic height values for shimmers.The skeleton loading implementation effectively mirrors the actual content layout. However, consider using more semantic height values for shimmers that match the actual content heights (e.g., use typography-based heights like
h2,h4,h6instead of fixedremvalues).- <BitShimmer Height="6rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="3rem" Width="100%" /> + <BitShimmer Height="var(--bit-typography-h2-line-height)" Width="100%" /> + <BitShimmer Height="var(--bit-typography-body2-line-height)" Width="100%" /> + <BitShimmer Height="var(--bit-typography-h6-line-height)" Width="100%" /> + <BitShimmer Height="var(--bit-typography-body2-line-height)" Width="100%" /> + <BitShimmer Height="var(--bit-typography-h4-line-height)" Width="100%" />
35-45: Enhance about section skeleton to better match content.The about section skeleton could better reflect the actual content structure which includes headings, paragraphs, and a list.
<BitCard FullWidth> <BitStack AutoHeight Grows> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> - <BitShimmer Height="1rem" Width="100%" /> + <BitStack Gap="1rem"> + <BitStack> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="90%" /> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="85%" /> + </BitStack> + <BitStack> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="88%" /> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="92%" /> + </BitStack> + <BitStack Gap="0.5rem"> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="20%" /> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="15%" /> + <BitShimmer Height="var(--bit-typography-body1-line-height)" Width="18%" /> + </BitStack> + </BitStack> </BitStack> </BitCard>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.scss(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/ProductPage.razor(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (2)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor (1)
76-84: Well-implemented skeleton loading template!The skeleton loading implementation effectively mirrors the actual product item layout, providing a smooth and consistent user experience during loading. The use of BitShimmer components with appropriate heights creates a natural placeholder effect.
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.scss (1)
39-39: LGTM!Setting width to 100% ensures the infinite scroll container properly fills its parent, maintaining consistent layout for both skeleton loading and actual content.
...rplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs
Outdated
Show resolved
Hide resolved
...rplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/ProductPage.razor
Show resolved
Hide resolved
…' of https://github.com/msynk/bitframework into 9773-templates-boilerplate-productpage-skeleton-loading
msynk
deleted the
9773-templates-boilerplate-productpage-skeleton-loading
branch
2 participants
closes #9773
Summary by CodeRabbit
New Features
Style
Bug Fixes