How to generate an array of widgets after waiting for an Aff action

multi-td-generation.purs

module Main where

import Prelude

import Effect (Effect)
import Data.Either (Either (..))
import Data.Traversable (traverse)
import Control.MultiAlternative (orr)
import Concur.Core (Widget)
import Concur.React (HTML)
import Concur.React.DOM (button, div', div_, text, table', th', tr', td, td', td_)
import Concur.React.Props (colSpan, onClick)
import Concur.React.Run (runWidgetInDom)
import Control.Alternative ((<|>))
import Effect.Aff (delay)
import Effect.Aff.Class (liftAff)
import Data.Time.Duration (Milliseconds (..))

waitEvent :: forall a. Array (Widget HTML a)
waitEvent = do
  result <- liftAff (delay (Milliseconds 10000.0) *> pure (Right 1111)) <|> td_ [colSpan 2] (text "Loading...")
  {-        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            No type class instance was found for
            Effect.Aff.Class.MonadAff Array
            while applying a function liftAff
  -}
  case result of
    Left err -> do
      void $ td [colSpan 2]
        [ text $ "Error occured: " <> err
        , button [onClick] [text "Retry"]
        ]
      waitEvent
    Right res ->
      [ td' [text $ "Value is=" <> show res]
      , td' $ text "Finished"
      ]
  
main :: Effect Unit
main = runWidgetInDom "main" $ table' 
  [ tr'
    [ th' [text "col1"]
    , th' [text "col2"]
    , th' [text "col3"]
    , th' [text "col4"]
    ]
  , tr'
    [ td' [text "1"]
    , td' [text "2"]
    ] <> waitEvent
  ]

1. The behaviour with retry can be fixed by recursing as you noted. Just get add a call to waitEvent after the error handling.
2. This already works fine as far as I can tell.
3. It's easy to show the columns while the ajax call is in progress, if you add the columns to be parallel to the call.

Here's the code with all of these modifications made -

module Main where

import Prelude

import Effect (Effect)
import Data.Either (Either (..))
import Data.Traversable (traverse)
import Control.MultiAlternative (orr)
import Concur.Core (Widget)
import Concur.React (HTML)
import Concur.React.DOM (button, div', div_, text, table', th', tr', td, td', td_)
import Concur.React.Props (colSpan, onClick)
import Concur.React.Run (runWidgetInDom)
import Control.Alternative ((<|>))
import Effect.Aff (delay)
import Effect.Aff.Class (liftAff)
import Data.Time.Duration (Milliseconds (..))



waitEvent :: (forall a. Array (Widget HTML a) -> Widget HTML a) -> Widget HTML Unit
waitEvent f = do
  result <- liftAff (delay (Milliseconds 1000.0) *> pure (Left "ERR" :: Either String Int)) <|> f [td_ [colSpan 2] (text "Loading...")]
  {-        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            No type class instance was found for
            Effect.Aff.Class.MonadAff Array
            while applying a function liftAff
  -}
  _ <- case result of
    Left err -> do
      f $ pure $ td [colSpan 2]
        [ text $ "Error occured: " <> err
        , button [onClick] [text "Retry"]
        ]
    Right res ->
      f [ td' [text $ "Value is=" <> show res]
      , td' $ pure $ text "Finished"
      ]
  waitEvent f
  
main :: Effect Unit
main = runWidgetInDom "main" $ table' 
  [ tr'
    [ th' [text "col1"]
    , th' [text "col2"]
    , th' [text "col3"]
    , th' [text "col4"]
    ]
  , waitEvent (\elems -> tr'
    ([ td' [text "1"]
    , td' [text "2"]
    ] <> elems))
  ]