Skip to content

Improve product page loading in Boilerplate (#9770) #9771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 2 commits into from
Feb 1, 2025
Merged

Improve product page loading in Boilerplate (#9770) #9771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6071cc7
Improve Boilerplate sales module product page not found case (#9770)
yasmoradi Feb 1, 2025
1b5bc23
fix
yasmoradi Feb 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
295 changes: 151 additions & 144 deletions ...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/ProductPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,157 +6,164 @@
<PageTitle>@product?.Name</PageTitle>

<section>
@if (product is null)
{
<BitEllipsisLoading Size="BitSize.Large" />
}
else
{
<BitStack Gap="2rem" Class="root-stack">

<BitLink NoUnderline Href="@Urls.HomePage">
<BitStack Horizontal Gap="0.5rem" VerticalAlign="BitAlignment.Center">
<BitIcon IconName="@(currentDir is BitDir.Rtl ? BitIconName.ChromeBackMirrored : BitIconName.ChromeBack)" Size="BitSize.Small" />
<BitText Typography="BitTypography.Body2">@Localizer[nameof(AppStrings.BackToHome)]</BitText>
</BitStack>
</BitLink>

<BitCard FullWidth Style="padding:3rem 1rem;">
<BitStack Horizontal HorizontalAlign="BitAlignment.Center" Gap="2rem">
<ProductImage Src="@GetProductImageUrl(product)" Width="30%" />
<BitStack AutoWidth Grows>
<BitText Typography="BitTypography.H2">@product.Name</BitText>
<BitText Color="BitColor.Info">@product.CategoryName</BitText>
<BitText Typography="BitTypography.H6">@product.Description</BitText>
<BitText Typography="BitTypography.H4">@product.FormattedPrice</BitText>
</BitStack>
</BitStack>
</BitCard>

<br />

<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.AboutTitle)]</BitText>

<BitCard FullWidth>
<BitText>
A <b>standard car</b> is designed with a focus on <b>functionality</b>, and <b>performance</b>.
It generally features a four-cylinder <b>internal combustion engine</b>, although some models come with six or eight-cylinder engines for added power.
The car's engine is paired with either an automatic or manual transmission to control gear shifts.
<br /><br />
The exterior includes features like <b>headlights</b>, <b>tail lights</b>, and <b>side mirrors</b> to ensure visibility and safety.
Inside, you'll find a seating capacity for four to five passengers, with seats typically upholstered in fabric or leather.
The dashboard is equipped with various controls, including an infotainment system that often supports Bluetooth connectivity,
a touchscreen display, and sometimes a GPS navigation system.
<br /><br />
For safety, standard cars are fitted with <b>airbags</b>, anti-lock braking systems (<b>ABS</b>), and electronic stability control (<b>ESC</b>).
The suspension system, including shock absorbers and struts, ensures a smooth ride by absorbing road irregularities.
<br /><br />
Fuel efficiency varies, but a typical car might offer around <b>25-30</b> miles per gallon (<b>mpg</b>) in combined city and highway driving.
Additionally, trunk space provides adequate room for luggage and groceries, making it a practical choice for <b>everyday use</b>.
<br /><br />
In summary, a generic car is designed to balance:
<ul>
<li>performance</li>
<li>comfort</li>
<li>safety</li>
</ul>
making it a reliable and convenient mode of transportation for daily activities.
</BitText>
</BitCard>

<br />
<br />

@if (isLoadingSimilarProducts)
<BitStack Gap="2rem" Class="root-stack">

<BitLink NoUnderline Href="@Urls.HomePage">
<BitStack Horizontal Gap="0.5rem" VerticalAlign="BitAlignment.Center">
<BitIcon IconName="@(currentDir is BitDir.Rtl ? BitIconName.ChromeBackMirrored : BitIconName.ChromeBack)" Size="BitSize.Small" />
<BitText Typography="BitTypography.Body2">@Localizer[nameof(AppStrings.BackToHome)]</BitText>
</BitStack>
</BitLink>

@if (isLoadingProduct)
{
<BitEllipsisLoading Size="BitSize.Large" />
}
else
{
if (product is null)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SimilarProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var itm in Enumerable.Range(0, 10))
{
<BitCard FullSize Style="width:250px">
<BitStack>
<ProductImage Width="100%" />
<BitShimmer Height="3rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="2rem" Width="100%" />
</BitStack>
</BitCard>
}
</BitStack>
</BitScrollablePane>
<NotFoundPage />
}
else if (similarProducts is not null)
else
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SimilarProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var prd in similarProducts)
{
<BitLink Href="@($"/product/{prd.Id}")" NoUnderline Style="width:250px">
<BitCard FullSize>
<BitStack>
<ProductImage Src="@GetProductImageUrl(prd)" Width="100%" />
<BitText>@prd.Name</BitText>
<BitText Typography="BitTypography.Body2">@prd.Description</BitText>
<BitText Typography="BitTypography.H6">@prd.FormattedPrice</BitText>
</BitStack>
</BitCard>
</BitLink>
}
<BitCard FullWidth Style="padding:3rem 1rem;">
<BitStack Horizontal HorizontalAlign="BitAlignment.Center" Gap="2rem">
<ProductImage Src="@GetProductImageUrl(product)" Width="30%" />
<BitStack AutoWidth Grows>
<BitText Typography="BitTypography.H2">@product.Name</BitText>
<BitText Color="BitColor.Info">@product.CategoryName</BitText>
<BitText Typography="BitTypography.H6">@product.Description</BitText>
<BitText Typography="BitTypography.H4">@product.FormattedPrice</BitText>
</BitStack>
</BitStack>
</BitScrollablePane>
</BitCard>

<br />

<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.AboutTitle)]</BitText>

<BitCard FullWidth>
<BitText>
A <b>standard car</b> is designed with a focus on <b>functionality</b>, and <b>performance</b>.
It generally features a four-cylinder <b>internal combustion engine</b>, although some models come with six or eight-cylinder engines for added power.
The car's engine is paired with either an automatic or manual transmission to control gear shifts.
<br /><br />
The exterior includes features like <b>headlights</b>, <b>tail lights</b>, and <b>side mirrors</b> to ensure visibility and safety.
Inside, you'll find a seating capacity for four to five passengers, with seats typically upholstered in fabric or leather.
The dashboard is equipped with various controls, including an infotainment system that often supports Bluetooth connectivity,
a touchscreen display, and sometimes a GPS navigation system.
<br /><br />
For safety, standard cars are fitted with <b>airbags</b>, anti-lock braking systems (<b>ABS</b>), and electronic stability control (<b>ESC</b>).
The suspension system, including shock absorbers and struts, ensures a smooth ride by absorbing road irregularities.
<br /><br />
Fuel efficiency varies, but a typical car might offer around <b>25-30</b> miles per gallon (<b>mpg</b>) in combined city and highway driving.
Additionally, trunk space provides adequate room for luggage and groceries, making it a practical choice for <b>everyday use</b>.
<br /><br />
In summary, a generic car is designed to balance:
<ul>
<li>performance</li>
<li>comfort</li>
<li>safety</li>
</ul>
making it a reliable and convenient mode of transportation for daily activities.
</BitText>
</BitCard>

<br />
<br />
}

<br />

@if (isLoadingSiblingProducts)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SiblingProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var itm in Enumerable.Range(0, 10))
{
<BitCard FullSize Style="width:250px">
}

@if (isLoadingSimilarProducts)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SimilarProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var itm in Enumerable.Range(0, 10))
{
<BitCard FullSize Style="width:250px">
<BitStack>
<ProductImage Width="100%" />
<BitShimmer Height="3rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="2rem" Width="100%" />
</BitStack>
</BitCard>
}
</BitStack>
</BitScrollablePane>
}
else if (similarProducts is not null)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SimilarProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var prd in similarProducts)
{
<BitLink Href="@($"/product/{prd.Id}")" NoUnderline Style="width:250px">
<BitCard FullSize>
<BitStack>
<ProductImage Width="100%" />
<BitShimmer Height="3rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="2rem" Width="100%" />
<ProductImage Src="@GetProductImageUrl(prd)" Width="100%" />
<BitText>@prd.Name</BitText>
<BitText Typography="BitTypography.Body2">@prd.Description</BitText>
<BitText Typography="BitTypography.H6">@prd.FormattedPrice</BitText>
</BitStack>
</BitCard>
}
</BitStack>
</BitScrollablePane>
}
else if (siblingProducts is not null)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SiblingProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var prd in siblingProducts)
{
<BitLink Href="@($"/product/{prd.Id}")" NoUnderline Style="width:250px">
<BitCard FullSize>
<BitStack>
<ProductImage Src="@GetProductImageUrl(prd)" Width="100%" />
<BitText>@prd.Name</BitText>
<BitText Typography="BitTypography.Body2">@prd.Description</BitText>
<BitText Typography="BitTypography.H6">@prd.FormattedPrice</BitText>
</BitStack>
</BitCard>
</BitLink>
}
</BitStack>
</BitScrollablePane>
}
</BitLink>
}
</BitStack>
</BitScrollablePane>
}

<br />

@if (isLoadingSiblingProducts)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SiblingProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var itm in Enumerable.Range(0, 10))
{
<BitCard FullSize Style="width:250px">
<BitStack>
<ProductImage Width="100%" />
<BitShimmer Height="3rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="1rem" Width="100%" />
<BitShimmer Height="2rem" Width="100%" />
</BitStack>
</BitCard>
}
</BitStack>
</BitScrollablePane>
}
else if (siblingProducts is not null)
{
<BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SiblingProducts)]</BitText>

<BitScrollablePane Width="100%" Style="padding:0.5rem">
<BitStack Horizontal FitWidth Style="align-items:unset">
@foreach (var prd in siblingProducts)
{
<BitLink Href="@($"/product/{prd.Id}")" NoUnderline Style="width:250px">
<BitCard FullSize>
<BitStack>
<ProductImage Src="@GetProductImageUrl(prd)" Width="100%" />
<BitText>@prd.Name</BitText>
<BitText Typography="BitTypography.Body2">@prd.Description</BitText>
<BitText Typography="BitTypography.H6">@prd.FormattedPrice</BitText>
</BitStack>
</BitCard>
</BitLink>
}
</BitStack>
</BitScrollablePane>
}

</BitStack>
}
</BitStack>
</section>
10 changes: 9 additions & 1 deletion .../Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/ProductPage.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ public partial class ProductPage
private ProductDto? product;
private List<ProductDto>? similarProducts;
private List<ProductDto>? siblingProducts;
private bool isLoadingProduct = true;
private bool isLoadingSimilarProducts;
private bool isLoadingSiblingProducts;

Expand All @@ -39,7 +40,14 @@ protected override async Task OnInitAsync()

private async Task LoadProduct()
{
product = await productViewController.Get(Id, CurrentCancellationToken);
try
{
product = await productViewController.Get(Id, CurrentCancellationToken);
}
finally
{
isLoadingProduct = false;
}
}

private void LoadOtherProducts()
Expand Down
Loading