revamped pics so they don't freeze or jump

Components/Pages/Pics.razor

@@ -1,5 +1,7 @@
 @page "/pics"
 @inject State State
+@inject IJSRuntime JS
+
 
 <div class="row center-align">
   <h3>
@@ -19,17 +21,112 @@
   </Authorized>
 </AuthorizeView>
 
-<div id="pics" class="responsive card-grid">
-  <PicList PicsFunc="@State.VirtualPicsFunc()"></PicList>
+<template id="PicCard">
+  <article class="no-padding">
+    <img src="{{Pic.Url}}" loading="lazy">
+    <div class="padding">
+      <nav>
+        <a class="author" href="/person/{{Pic.Address}}#pics">
+          <i class="fa-solid fa-fw fa-at"></i>{{Pic.Address}}
+        </a>
+        <span class="max"></span>
+        <a class="chip transparent-border right">
+          <i class="fa fa-clock"></i> {{Pic.RelativeTime}}
+        </a>
+        <span class="max"></span>
+        <button class="right-align share-button transparent circle">
+          <input type="hidden" name="url" value="{{Pic.Url}}" />
+          <input type="hidden" name="description" value="{{Pic.Description}}" />
+          <i class="fa-solid fa-share-nodes"></i>
+        </button>
+      </nav>
+      <p class="description">{{Pic.Description}}</p>
+      <nav>
+        <div class="max"></div>
+        @* @if (Editable) {
+          <button @onclick="EditPic"><i class="fa-solid fa-pencil"></i> Edit</button>
+        } *@
+        
+      </nav>
     </div>
+  </article>
+</template>
+
+<div id="pics" class="responsive card-grid">
+  @* <PicList PicsFunc="@State.VirtualPicsFunc()"></PicList> *@
+  <article id="pics-loading" class="middle-align center-align">
+    <div>
+      <i class="extra fa-solid fa-images"></i>
+      <div class="space"></div>
+      <progress class="circle"></progress>
+    </div>
+  </article>
+</div>
+
+<script>
+  const template = document.getElementById("PicCard")
+  let cSharp;
+  async function renderPics(somePics) {
+    for(const pic of somePics){
+      const clone = template.content.cloneNode(true)
+      let html = clone.children[0].innerHTML
+
+      html = html.replaceAll("{{Pic.Url}}", pic.url)
+      html = html.replaceAll("{{Pic.Address}}", pic.address)
+      html = html.replaceAll("{{Pic.RelativeTime}}", pic.relativeTime)
+      html = html.replaceAll("{{Pic.Description}}", pic.description)
+
+      clone.children[0].innerHTML = html
+
+      clone.querySelector('.share-button').addEventListener('click', shareClick)
+      document.getElementById("pics").insertBefore(clone, document.getElementById("pics-loading"))
+    }
+  }
+  async function clearLoading() {
+    document.getElementById("pics-loading").remove()
+  }
+
+  async function shareClick(e) {
+    const url = this.querySelector('input[name="url"]')?.value
+    const desc = this.querySelector('input[name="description"]')?.value
+    if (cSharp) cSharp.invokeMethodAsync('ShareClick', url, desc)
+  }
+
+  async function setDotNetHelper(helper) {
+    cSharp = helper;
+  }
+</script>
 
 @code {
   private List<Pic> pics;
-  private async ValueTask<ItemsProviderResult<Pic>> GetPics(ItemsProviderRequest request) {
-    // TODO: request.cancellationToken
+  private DotNetObjectReference<Pics>? objRef;
+
+  protected override void OnInitialized() {
+    objRef = DotNetObjectReference.Create(this);
+  }
+
+  protected override async Task OnAfterRenderAsync(bool firstRender) {
+    await base.OnAfterRenderAsync(firstRender);
+    if (firstRender) {
+      await JS.InvokeVoidAsync("setDotNetHelper", objRef);
       RestService api = new RestService();
       if (pics == null || pics.Count == 0) pics = await api.SomePics();
-    var numPics = Math.Min(request.Count, pics.Count - request.StartIndex);
-    return new ItemsProviderResult<Pic>(pics.Skip(request.StartIndex).Take(numPics), pics.Count);
+
+      int page_size = 1;
+      for(int i = 0; i < pics.Count; i += page_size) {
+        await JS.InvokeVoidAsync("renderPics", pics.Skip(i * page_size).Take(page_size));
+      }
+      await JS.InvokeVoidAsync("clearLoading");
+    }
+  }
+
+  [JSInvokable]
+  public async Task ShareClick(string? url, string? description) {
+    await Share.Default.RequestAsync(new ShareTextRequest {
+        Uri = url,
+        Text = description,
+        Title = "I saw this on some.pics",
+        Subject = "I saw this on some.pics"
+      });
   }
 }