显示一个'；加载占位符'；在Elm中呈现DOM元素时

当Elm有很多DOM操作要做时，在结果显示之前会有一些延迟。我正试图弄清楚如何在Elm执行其操作时显示一个显示“正在加载…”的占位符div

为了演示延迟，我修改了其中一个，以便在单击按钮时呈现越来越多的文本元素：

import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)

main =
  beginnerProgram { model = 0, view = view, update = update }


view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    , div [] (List.repeat (2 ^ model) (text ". ")) -- this is my addition
    ]

type Msg = Increment | Decrement

update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

运行该示例时，单击“+”按钮将显示以2的幂表示的“.”字符。当数字足够高（在我的机器上大约为16）时，在显示“.”字符之前，单击后会有几秒钟的延迟

在呈现“.”元素之前，显示“加载…”元素（比如说在“div”中）的好方法是什么？

您需要使用常规的

Html.program

，并从

增量
/
减量
更新处理程序返回
Cmd
，该处理程序将暂停以让DOM呈现“加载”，然后重新输入
更新
：

导入Html（程序、div、按钮、文本）
导入Html.Events（onClick）
导入过程
导入任务
主要=
程序{init=（模型0 False，Cmd.none），视图=视图，更新=更新，订阅=\ \ \->Sub.none}
类型别名模型=
{count:Int
，加载：Bool
}
视图模型=
让
点播=
如果是model.loading，那么
div[]文本“加载…”
其他的
div[]（List.repeat（2^model.count）（文本“.”）
在里面
分区[]
[按钮[点击减量][文本“-”]
，div[]文本（toString model.count）]
，按钮[onClick Increment][text“+”]
，dotsDisplay
]
Msg类型=增量|减量|完成加载
finishLoadingCmd=
Task.map2（\\ub->b）（Process.sleep 10）（Task.successful finishload）
|>任务。执行标识
更新msg模型=
味精案例
增量->
{model | count=model.count+1，load=True}！[finishLoadingCmd]
减量->
{model | count=model.count-1，load=True}！[finishLoadingCmd]
完成加载->
{model | load=False}！[]

它仍然会在渲染所有节点时锁定浏览器，因此您可能仍然希望找到一种不渲染100k+DOM元素的方法…
从示例代码中我看到的是，浏览器渲染/布局实际上花费了大部分等待时间，而不是通过js引擎扩散虚拟DOM。您可能希望研究其他框架（或者简单地通过javascript DOM api调用）如何处理它，因为它似乎并不特定于Elm。