It’s easy to create a Kino.frame and render some status text like “Loading” or “Idle”. Ideally I’d like to disable the submit button in my form and display a spinner inside it. I’m wondering what elixirforum friendly folks do in their Livebooks! :slight_smile:

You can build your own spinner UI component based on Kino.HTML like that: 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…

Hey, looks like you’re really lucky: Elixir Blog Posts - #1129 by tommica

I’m not sure - that blog post was written for Liveview. Is it applicable to Livebook? :thinking:

Oh, you’re right.. I think you could do something similar with Kino.HTML ?

Yeah, I think Kino.HTML might be it. I could create a reusable spinner component, then render it into a Frame whenever there is some async task.

There is a little bit of prior art in the form of hex.pm/packages/kino_progress_bar . Even if it doesn’t meet your needs, it may serve as inspiration for a new solution.

~btw I think you meant to write Kino.Frame.new() instead of frame()? Where does frame() come from?~ Nevermind, import Kino.Shorts is the answer.

It seems that grid() breaks the <enter> key behavior in the form’s text input. Where should I report that?

You can report on Issues · livebook-dev/livebook · GitHub

Elixir Programming Language Forum

Livebook: How do folks display progress?

Questions & Help Questions

bgoosman September 18, 2024, 5:51pm 8

Wow, thanks for the high effort post Hugo!