53 lines
No EOL
1.7 KiB
Text
53 lines
No EOL
1.7 KiB
Text
@using Iceshrimp.Shared.Schemas
|
|
@using Ljbc1994.Blazor.IntersectionObserver.API
|
|
@using Ljbc1994.Blazor.IntersectionObserver.Components
|
|
@inject IJSRuntime Js
|
|
<IntersectionObserve OnChange="@(entry => Change(Note.Id, entry))">
|
|
<div class="tgt" @ref="context.Ref.Current">
|
|
@if (_isIntersecting)
|
|
{
|
|
<TimelineNote Note="Note" />
|
|
}else {
|
|
<div class="placeholder" style="height: @(Height ?? 150)px"></div>
|
|
}
|
|
</div>
|
|
</IntersectionObserve>
|
|
@code {
|
|
[Parameter] public required NoteResponse Note { get; set; }
|
|
private IJSObjectReference? _module;
|
|
private int? Height { get; set; } = null;
|
|
private bool _isIntersecting = true;
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if (firstRender)
|
|
{
|
|
_module = await Js.InvokeAsync<IJSObjectReference>("import",
|
|
"./Components/LazyNote.razor.js");
|
|
}
|
|
}
|
|
|
|
private async Task Change(string id, IntersectionObserverEntry entry)
|
|
{
|
|
if (id == Note.Id && entry.IsIntersecting == false)
|
|
{
|
|
Height = await GetHeight();
|
|
_isIntersecting = false;
|
|
StateHasChanged();
|
|
return;
|
|
}
|
|
|
|
if (id == Note.Id && entry.IsIntersecting)
|
|
{
|
|
_isIntersecting = true;
|
|
}
|
|
}
|
|
|
|
private async Task<int?> GetHeight()
|
|
{
|
|
var height = await (_module ?? throw new Exception("Call to JS module was made before it was loaded, this should not have happened"))
|
|
.InvokeAsync<int?>("getScrollHeight", Note.Id);
|
|
return height;
|
|
}
|
|
|
|
} |