purescript/trypurescript

Loading continues even after loading screen disappears

mikesol opened this issue · 2 comments

I'm using trypurescript to prototype some Halogen apps, and there is an interesting phenomenon where the loading screen disappears about 1-2 seconds before the Halogen app appears. Here is my app:

module Main where

import Prelude

import Effect (Effect)
import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)
import Prelude
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE

type State
  = { count :: Int }

data Action
  = Increment

component :: forall q i o m. H.Component q i o m
component =
  H.mkComponent
    { initialState: \_ -> { count: 0 }
    , render
    , eval: H.mkEval H.defaultEval { handleAction = handleAction }
    }

render :: forall cs m. State -> H.ComponentHTML Action cs m
render state =
  HH.div_
    [ HH.p_
        [ HH.text $ "You clicked " <> show state.count <> " times" ]
    , HH.button
        [ HE.onClick \_ -> Increment ]
        [ HH.text "Click me" ]
    ]

handleAction :: forall cs o m. Action  H.HalogenM State Action cs o m Unit
handleAction = case _ of
  Increment -> H.modify_ \st -> st { count = st.count + 1 }

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component unit body

If you copy the code above into trypurescript, you'll see that after the load screen disappears, there's a 1-2 second delay before the button appears.

I can try to put together a PR to keep the loading screen up for longer, but first it'd be good to confirm that this is actually the case for other folks as well. My initial guess is that this line setting up the iframe would require some sort of callback hook from the frame that the initial JS rendering is done before making the loading screen disappear. Thanks in advance for your ideas/help!

Huh -- for some reason I'm not even seeing the loading icon when I load this up! Just blank until the button appears. I'm happy to accept improvements to the iframe loading for sure, as I think there could easily be some weirdness with the communication between Halogen and the iframe.

#256 takes a first stab at it. I have that up and running on https://purescript-wags.netlify.app. It more or less works!