Lazy rendered tabs

[petrkozorezov]

I have a Kino.Layout.tabs() with a few heavy calculated tabs.
And it's would be convenient to evaluate it lazily, only when corresponding tabs is opened.

[jonatanklosko]

Kino.Layout.tabs is intended to be stateless and is effectively only a layout for a group of predefined outputs.

Lazy rendering could be achieved with a button that triggers the computation and a frame for the result:

frame = Kino.Frame.new(placeholder: false) button = Kino.Control.button("Compute") Kino.Frame.render(frame, button) Kino.listen(button, fn _event -> output = Kino.DataTable.new([%{id: 1, name: "Lazy"}]) Kino.Frame.render(frame, output) end) frame

One could also implement something akin to lazy tabs, like this:

lazy_tabs = fn tabs -> frame = Kino.Frame.new(placeholder: false) {names, funs} = Enum.unzip(tabs) buttons = for name <- names, do: Kino.Control.button(to_string(name)) buttons |> Enum.with_index(fn button, idx -> {:"#{idx}", button} end) |> Kino.Control.tagged_stream() |> Kino.listen(%{}, fn {tab, event}, cache -> idx = tab |> Atom.to_string() |> String.to_integer() cache = Map.put_new_lazy(cache, idx, fn -> Enum.fetch!(funs, idx).() end) Kino.Frame.render(frame, cache[idx], to: event.origin) {:cont, cache} end) Kino.Layout.grid([Kino.Layout.grid(buttons, columns: length(buttons)), frame]) end

lazy_tabs.( First: fn -> Kino.DataTable.new([%{id: 1, name: "First"}]) end, Second: fn -> Kino.DataTable.new([%{id: 1, name: "Second"}]) end )

[hugobarauna]

Another option is to keep using regular tabs, but doing the calculation and rendering async.

Here's what it would look like:

Here's the main code:

frame = Kino.Frame.new() async_render = fn frame, callback -> Kino.Frame.render(frame, KinoSpinner.new()) Task.start(fn -> callback.(frame) end) frame end expensive_computation = fn frame -> Process.sleep(5_000) Kino.Frame.render(frame, "expensiven result") end Kino.Layout.tabs([ {"Cheap computation", "hi"}, {"Expensive computation", async_render.(frame, expensive_computation)} ])

And the spinner component:

defmodule KinoSpinner do def new(dimensions \\ "30px") do Kino.HTML.new("""  <div class="loader"></div>   <style>  .loader {  border: 16px solid #f3f3f3; /* Light grey */  border-top: 16px solid #3498db; /* Blue */  border-radius: 50%;  width: #{dimensions};  height: #{dimensions};  animation: spin 2s linear infinite;  }   @keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }  }  </style>  """) end end