From 0c3836b0c8d773708aef43e4822203c9d4099893 Mon Sep 17 00:00:00 2001 From: Gordon Pedersen Date: Thu, 13 Jun 2024 14:46:24 +1000 Subject: [PATCH] Simplify and standardise a lot of the loading I was overcomplicating everything trying to reduce the render lag. Just simplify it a bit. It works. --- Components/ExternalPageComponent.razor | 11 ++- Components/LoadingCard.razor | 16 ++++ Components/PageHeading.razor | 18 +++++ Components/Pages/Ephemeral.razor | 41 +++++----- Components/Pages/Now.razor | 33 ++++---- Components/Pages/Person.razor | 39 ++++----- Components/Pages/Pics.razor | 13 +-- Components/Pages/StatuslogLatest.razor | 14 +--- Components/PicCard.razor | 2 +- Components/PicList.razor | 108 +++---------------------- Components/StatusCard.razor | 26 +++--- Components/StatusList.razor | 35 ++++---- Models/Pic.cs | 2 +- Models/State.cs | 70 ++++------------ wwwroot/css/style.css | 27 ++++++- wwwroot/js/csharp.js | 11 +++ 16 files changed, 205 insertions(+), 261 deletions(-) create mode 100644 Components/LoadingCard.razor create mode 100644 Components/PageHeading.razor diff --git a/Components/ExternalPageComponent.razor b/Components/ExternalPageComponent.razor index 65b3f1b..9e54d9b 100644 --- a/Components/ExternalPageComponent.razor +++ b/Components/ExternalPageComponent.razor @@ -1,17 +1,20 @@ @inject IJSRuntime JS +@inject State State @if(Html != null) { } - - - @code { [Parameter] public string Url { get; set; } [Parameter] public string id { get; set; } - public MarkupString? Html { get; set; } + public MarkupString? Html { get; set; } + + protected override void OnInitialized() { + base.OnInitialized(); + State.CurrentPage = Page.Other; + } protected override async Task OnAfterRenderAsync(bool firstRender) { if(firstRender){ diff --git a/Components/LoadingCard.razor b/Components/LoadingCard.razor new file mode 100644 index 0000000..eabf9be --- /dev/null +++ b/Components/LoadingCard.razor @@ -0,0 +1,16 @@ +
+
+ +
+ +
+
+ +@code { + [Parameter] + public string id { get; set; } + [Parameter] + public string? @class { get; set; } + [Parameter] + public string icon { get; set; } +} diff --git a/Components/PageHeading.razor b/Components/PageHeading.razor new file mode 100644 index 0000000..401ded3 --- /dev/null +++ b/Components/PageHeading.razor @@ -0,0 +1,18 @@ +
+

+ @title +

+
+
+

@Description

+
+
+ +@code { + [Parameter] + public string icon { get; set; } + [Parameter] + public string title { get; set; } + [Parameter] + public RenderFragment Description { get; set; } +} diff --git a/Components/Pages/Ephemeral.razor b/Components/Pages/Ephemeral.razor index 8e319c2..a36404a 100644 --- a/Components/Pages/Ephemeral.razor +++ b/Components/Pages/Ephemeral.razor @@ -1,27 +1,30 @@ @page "/ephemeral" +@inject IJSRuntime JS +@inject State State + + Eph.emer.al is a place for fleeting thoughts. Everything on this page will disappear after a while. + -
-

- Ephemeral -

+
+ + @if (messages != null) { + foreach (MarkupString message in messages) { +
+ @message +
+ } + } + +
-
-

Ephemeral is a place for fleeting thoughts. Everything on this page will disappear after a while.

-
- - - -
- @message -
- @code { - private List messages = new List(); + private List? messages; protected override async Task OnInitializedAsync() { - //await Shell.Current.GoToAsync(nameof(EphemeralWebPage)); - RestService api = new RestService(); - messages = await api.Ephemeral(); + await base.OnInitializedAsync(); + if (messages == null || messages.Count == 0) messages = await State.GetEphemeralMessages(); + await InvokeAsync(StateHasChanged); + await JS.InvokeVoidAsync("removeElementById", "ephemeral-loading"); } -} +} \ No newline at end of file diff --git a/Components/Pages/Now.razor b/Components/Pages/Now.razor index d9a6ead..b382f48 100644 --- a/Components/Pages/Now.razor +++ b/Components/Pages/Now.razor @@ -1,17 +1,14 @@ @page "/now" +@inject IJSRuntime JS @inject State State -
-

- Now.garden -

-
-
-

Feel free to stroll through the now.garden and take a look at what people are up to.

-
+ + Feel free to stroll through the now.garden and take a look at what people are up to. +
- - + + @if (garden != null) { + foreach (NowData now in garden) { - - - - - + } + } + +
@code { + private List? garden; + protected override async Task OnInitializedAsync() { + await base.OnInitializedAsync(); + if (garden == null || garden.Count == 0) garden = await State.GetNowGarden(); + await InvokeAsync(StateHasChanged); + await JS.InvokeVoidAsync("removeElementById", "now-loading"); + } } diff --git a/Components/Pages/Person.razor b/Components/Pages/Person.razor index 8ac49e4..e3d63eb 100644 --- a/Components/Pages/Person.razor +++ b/Components/Pages/Person.razor @@ -1,6 +1,7 @@ @page "/person/{Address}" @inject State State @inject IJSRuntime JS +@inject NavigationManager Nav
@@ -10,16 +11,6 @@ @Address
-
- @if (bio == null) - { -

Getting Bio...

- } - else { - @bio - } -
-
@@ -42,6 +33,7 @@ }
+
Open in browser @@ -49,14 +41,21 @@
- +
+
+ @if (bio == null) { +

+ } + else { + @bio + } +
+
+
- @if(Editable){ - - } - +
@if(now != null){
@@ -73,7 +72,6 @@ get => $"https://{Address}.omg.lol/"; } - private EditPicDialog? editPicDialog { get; set; } public ExternalPageComponent? NowPage { get; set; } public ExternalPageComponent? ProfilePage { get; set; } @@ -86,9 +84,14 @@ private NowData? now; protected override async Task OnInitializedAsync() { + List? garden = await State.GetNowGarden(); + now = garden?.FirstOrDefault(n => n.Address == Address); + await InvokeAsync(StateHasChanged); + string fragment = new Uri(Nav.Uri).Fragment; + await JS.InvokeVoidAsync("ui", fragment); + if (fragment.EndsWith("now")) await ReloadNow(); + else if (fragment.EndsWith("profile")) await ReloadProfile(); bio = await State.GetBio(Address); - List garden = await State.GetNowGarden(); - now = garden.FirstOrDefault(n => n.Address == Address); } private async Task ReloadNow() { diff --git a/Components/Pages/Pics.razor b/Components/Pages/Pics.razor index 95351b1..29f0e4d 100644 --- a/Components/Pages/Pics.razor +++ b/Components/Pages/Pics.razor @@ -1,16 +1,9 @@ @page "/pics" @inject State State -@inject IJSRuntime JS - -
-

- Some.pics -

-
-
-

Sit back, relax, and look at some.pics

-
+ + Sit back, relax, and look at some.pics + diff --git a/Components/Pages/StatuslogLatest.razor b/Components/Pages/StatuslogLatest.razor index 62d9bfa..2d2e060 100644 --- a/Components/Pages/StatuslogLatest.razor +++ b/Components/Pages/StatuslogLatest.razor @@ -1,14 +1,9 @@ @page "/statuslog/latest" @inject State State -
-

- Statuslog -

-
-
-

The latest posts from everyone at status.lol

-
+ + The latest posts from everyone at status.lol + @@ -20,10 +15,9 @@
- +
- @code { } diff --git a/Components/PicCard.razor b/Components/PicCard.razor index 55efda8..2ca63d6 100644 --- a/Components/PicCard.razor +++ b/Components/PicCard.razor @@ -12,7 +12,7 @@ @Pic.RelativeTime -

@Pic.Description

+

@((MarkupString)Pic.DescriptionHtml)