Hiding a Web Element during Load event not working in 1.0.0-preview1

[nixtar]

Describe the Bug

Testing porting a simple page from 0.8.3 to 1.0.0 and I noticed that some of the Elements that should be hidden be default are not hidden.

The way this was done was by registering a load event that calls Hide-PodeWebComponent (now renamed to Hide-PodeWebElement)

Steps To Reproduce

Import-Module Pode -Force
Import-Module Pode.Web -Force

Start-PodeServer {
    # add a simple endpoint
    Add-PodeEndpoint -Address localhost -Port 8090 -Protocol Http
    New-PodeLoggingMethod -Terminal | Enable-PodeErrorLogging


    Use-PodeWebTemplates -Title 'Test' -Theme Dark -RootRedirect
	
	$navDropdown = New-PodeWebNavDropdown -Name 'Theme' -Icon 'mdi-theme-light-dark' -Items @(
		New-PodeWebNavLink -Name 'Dark Theme' -Icon 'moon-new' -NoAuth -ScriptBlock { Update-PodeWebTheme -Name Dark }
		New-PodeWebNavLink -Name 'Light Theme' -Icon 'weather-sunny' -NoAuth -ScriptBlock { Update-PodeWebTheme -Name Light }
	)
	
	Set-PodeWebNavDefault -Items $navDropdown

    # add a home page page
    $page = Add-PodeWebPage -Name 'Page 1' -Id 'page_1' -HomePage -PassThru -ScriptBlock {
        New-PodeWebCard -Name 'Welcome' -Content @(
            New-PodeWebParagraph -Value 'This is an example homepage, with some example text'
            New-PodeWebParagraph -Value 'Using some example paragraphs'
            New-PodeWebButton -Name 'Hello' -ScriptBlock {
                Show-PodeWebElement -Id 'test'
            }
        )

        New-PodeWebCard -Id "test" -DisplayName "Hello" -Content @(
            New-PodeWebButton -Name "Bye World!" -ScriptBlock {
                Hide-PodeWebElement -Id "test"
            }
        )
    }

    $page | Register-PodeWebPageEvent -Type Load -ScriptBlock {
        Hide-PodeWebElement -Id "test"
    }
}

Expected Behavior

The "Hello" card with id test should be hidden on load.

[nixtar]

Workaround for this scenario is to hide the element within the webcard like this:

Add-PodeWebPage -Name 'Page 1' -Id 'page_1' -HomePage -PassThru -ScriptBlock {
    New-PodeWebCard -Name 'Welcome' -Content @(
        New-PodeWebParagraph -Value 'This is an example homepage, with some example text'
        New-PodeWebParagraph -Value 'Using some example paragraphs'
        New-PodeWebButton -Name 'Hello' -ScriptBlock {
            Show-PodeWebElement -Id 'test'
        }
    )
    New-PodeWebCard -Id "test" -DisplayName "Hello" -Content @(
        New-PodeWebButton -Name "Bye World!" -ScriptBlock {
            Hide-PodeWebElement -Id "test"
        }
    ) | Hide-PodeWebElement
}

This is probably "the way" to do this kind of thing.

But it's interesting that the previous method I was using isn't working anymore.

[Badgerati]

Funnily enough the original method was the workaround!

Because pre-v1.0.0 you couldn't hide an element by default on its initial creation, the workaround was to use the page loaded event to do so. For some people this did causes a slight flashing of the element at times.

In v1.0.0 it's now possible to hide the element by default when you create it, as you've seen:

New-PodeWebCard -Id "test" -DisplayName "Hello" -Content @(
    New-PodeWebButton -Name "Bye World!" -ScriptBlock {
        Hide-PodeWebElement -Id "test"
    }
) | Hide-PodeWebElement

This removes the dependency on a load event, and it's something I can add into the migration guide to make people more aware.

---

As for the reason it doesn't work any more, this is due to how the elements are now rendered. Originally when a page was built it was entirely synchronous, so when the page had loaded so to had all the elements. However, the elements loading and rendering is now entirely asynchronously, which means when the default HTML page load event triggers some elements won't have been loaded yet.

This might be classified as a bug actually, and I'll have to see about moving the page load event away from HTML's events and to a custom event call when the elements are loaded 🤔

[nixtar]

Yeah I figured as much once I saw you can hide inline now.

PS So far 1.0.0 is going great. 👍 Can't wait to sink my teeth into the async stuff.