add second demo

Author: msynk

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/InfiniteScrolling/BitInfiniteScrollingDemo.razor

@@ -12,7 +12,7 @@
                    ComponentPublicMembers="componentPublicMembers">
         <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
             <ExamplePreview>
-                <BitInfiniteScrolling ItemsProvider="LoadItems" Class="container">
+                <BitInfiniteScrolling ItemsProvider="LoadItems" Class="basic">
                     <ItemTemplate Context="item">
                         <div>Item @item</div>
                     </ItemTemplate>
@@ -22,5 +22,18 @@
                 </BitInfiniteScrolling>
             </ExamplePreview>
         </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Advanced" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+            <ExamplePreview>
+                <BitInfiniteScrolling ItemsProvider="LoadItems" Class="advanced">
+                    <ItemTemplate Context="item">
+                        <div class="item">Item @item</div>
+                    </ItemTemplate>
+                    <LoadingTemplate>
+                        <div class="loading">Loading...</div>
+                    </LoadingTemplate>
+                </BitInfiniteScrolling>
+            </ExamplePreview>
+        </ComponentExampleBox>
     </ComponentDemo>
 </div>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/InfiniteScrolling/BitInfiniteScrollingDemo.razor.cs

@@ -57,6 +57,22 @@ private async ValueTask<IEnumerable<int>> LoadItems(BitInfiniteScrollingItemsPro
 </BitInfiniteScrolling>";
     private readonly string example1CsharpCode = @"
 private async Task<IEnumerable<int>> GetItems(BitInfiniteScrollingItemsProviderRequest request)
+{
+    await Task.Delay(1000);
+    return Enumerable.Range(request.Skip, 20);
+}";
+
+    private readonly string example2RazorCode = @"
+<BitInfiniteScrolling ItemsProvider=""LoadItems"" Class=""advanced"">
+    <ItemTemplate Context=""item"">
+        <div class=""item"">Item @item</div>
+    </ItemTemplate>
+    <LoadingTemplate>
+        <div class=""loading"">Loading...</div>
+    </LoadingTemplate>
+</BitInfiniteScrolling>";
+    private readonly string example2CsharpCode = @"
+private async Task<IEnumerable<int>> GetItems(BitInfiniteScrollingItemsProviderRequest request)
 {
     await Task.Delay(1000);
     return Enumerable.Range(request.Skip, 20);

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/InfiniteScrolling/BitInfiniteScrollingDemo.razor.scss

@@ -1,5 +1,25 @@
+.item {
+    padding: 1rem;
+    border: 1px solid gray;
+}
+
+.loading {
+    padding: 1rem;
+    display: flex;
+    font-weight: bold;
+    align-items: center;
+}
+
 ::deep {
-    .container {
+    .basic {
         max-height: 300px;
     }
+
+    .advanced {
+        gap: 1rem;
+        display: flex;
+        flex-wrap: wrap;
+        max-width: 24rem;
+        max-height: 20rem;
+    }
 }