feat: better loading

.gitignore

@@ -19,3 +19,6 @@
 
 # Go workspace file
 go.work
+
+# Debugging
+debug.log

eval.go

@@ -1,6 +1,10 @@
 package huh
 
-import "github.com/mitchellh/hashstructure/v2"
+import (
+	"time"
+
+	"github.com/mitchellh/hashstructure/v2"
+)
 
 type Eval[T any] struct {
 	val T
@@ -10,9 +14,12 @@ type Eval[T any] struct {
 	bindingsHash uint64
 	cache        map[uint64]T
 
-	loading bool
+	loading      bool
+	loadingStart time.Time
 }
 
+const spinnerShowThreshold = 25 * time.Millisecond
+
 func hash(val any) uint64 {
 	hash, _ := hashstructure.Hash(val, hashstructure.FormatV2, nil)
 	return hash

examples/dynamic/dynamic-country/main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"fmt"
+	"strings"
 	"time"
 
 	"github.com/charmbracelet/log"
@@ -48,7 +49,7 @@ func main() {
 					return fmt.Sprintf("You selected: %s", country)
 				}, &country).
 				DescriptionFunc(func() string {
-					return fmt.Sprintf("You selected: %s", state)
+					return fmt.Sprintf("You selected: %s", strings.Join(state, ", "))
 				}, []any{&country, &state}),
 		),
 	)

field_confirm.go

@@ -106,7 +106,6 @@ func (c *Confirm) Title(title string) *Confirm {
 
 // TitleFunc sets the title func of the confirm field.
 func (c *Confirm) TitleFunc(f func() string, bindings any) *Confirm {
-	c.title.val = "Loading..."
 	c.title.fn = f
 	c.title.bindings = bindings
 	return c
@@ -121,7 +120,6 @@ func (c *Confirm) Description(description string) *Confirm {
 
 // DescriptionFunc sets the description function of the confirm field.
 func (c *Confirm) DescriptionFunc(f func() string, bindings any) *Confirm {
-	c.description.val = "Loading..."
 	c.description.fn = f
 	c.description.bindings = bindings
 	return c
@@ -165,7 +163,6 @@ func (c *Confirm) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := c.title.shouldUpdate(); ok {
 			c.title.bindingsHash = hash
 			if !c.title.loadFromCache() {
-				c.title.val = "Loading..."
 				c.title.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateTitleMsg{id: c.id, title: c.title.fn(), hash: hash}
@@ -175,7 +172,6 @@ func (c *Confirm) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := c.description.shouldUpdate(); ok {
 			c.description.bindingsHash = hash
 			if !c.description.loadFromCache() {
-				c.description.val = "Loading..."
 				c.description.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateDescriptionMsg{id: c.id, description: c.description.fn(), hash: hash}

field_input.go

@@ -92,15 +92,13 @@ func (i *Input) Description(description string) *Input {
 func (i *Input) TitleFunc(f func() string, bindings any) *Input {
 	i.title.fn = f
 	i.title.bindings = bindings
-	i.title.val = "Loading..."
 	return i
 }
 
 // DescriptionFunc sets the description func of the text field.
 func (i *Input) DescriptionFunc(f func() string, bindings any) *Input {
 	i.description.fn = f
 	i.description.bindings = bindings
-	i.description.val = "Loading..."
 	return i
 }
 
@@ -258,7 +256,6 @@ func (i *Input) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := i.title.shouldUpdate(); ok {
 			i.title.bindingsHash = hash
 			if !i.title.loadFromCache() {
-				i.title.val = "Loading..."
 				i.title.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateTitleMsg{id: i.id, title: i.title.fn(), hash: hash}
@@ -268,7 +265,6 @@ func (i *Input) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := i.description.shouldUpdate(); ok {
 			i.description.bindingsHash = hash
 			if !i.description.loadFromCache() {
-				i.description.val = "Loading..."
 				i.description.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateDescriptionMsg{id: i.id, description: i.description.fn(), hash: hash}
@@ -280,7 +276,6 @@ func (i *Input) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			if i.placeholder.loadFromCache() {
 				i.textinput.Placeholder = i.placeholder.val
 			} else {
-				i.placeholder.val = "Loading..."
 				i.placeholder.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updatePlaceholderMsg{id: i.id, placeholder: i.placeholder.fn(), hash: hash}

field_multiselect.go

@@ -3,8 +3,10 @@ package huh
 import (
 	"fmt"
 	"strings"
+	"time"
 
 	"github.com/charmbracelet/bubbles/key"
+	"github.com/charmbracelet/bubbles/spinner"
 	"github.com/charmbracelet/bubbles/textinput"
 	"github.com/charmbracelet/bubbles/viewport"
 	tea "github.com/charmbracelet/bubbletea"
@@ -37,6 +39,7 @@ type MultiSelect[T comparable] struct {
 	filtering bool
 	filter    textinput.Model
 	viewport  viewport.Model
+	spinner   spinner.Model
 
 	// options
 	width      int
@@ -50,6 +53,8 @@ func NewMultiSelect[T comparable]() *MultiSelect[T] {
 	filter := textinput.New()
 	filter.Prompt = "/"
 
+	s := spinner.New(spinner.WithSpinner(spinner.Line))
+
 	return &MultiSelect[T]{
 		id:          nextID(),
 		options:     Eval[[]Option[T]]{cache: make(map[uint64][]Option[T])},
@@ -59,6 +64,7 @@ func NewMultiSelect[T comparable]() *MultiSelect[T] {
 		validate:    func([]T) error { return nil },
 		filtering:   false,
 		filter:      filter,
+		spinner:     s,
 	}
 }
 
@@ -94,7 +100,6 @@ func (m *MultiSelect[T]) Title(title string) *MultiSelect[T] {
 func (m *MultiSelect[T]) TitleFunc(f func() string, bindings any) *MultiSelect[T] {
 	m.title.fn = f
 	m.title.bindings = bindings
-	m.title.val = "Loading..."
 	return m
 }
 
@@ -108,7 +113,6 @@ func (m *MultiSelect[T]) Description(description string) *MultiSelect[T] {
 func (m *MultiSelect[T]) DescriptionFunc(f func() string, bindings any) *MultiSelect[T] {
 	m.description.fn = f
 	m.description.bindings = bindings
-	m.description.val = "Loading..."
 	return m
 }
 
@@ -223,13 +227,16 @@ func (m *MultiSelect[T]) Init() tea.Cmd {
 
 // Update updates the multi-select field.
 func (m *MultiSelect[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+
 	// Enforce height on the viewport during update as we need themes to
 	// be applied before we can calculate the height.
 	m.updateViewportHeight()
 
 	var cmd tea.Cmd
 	if m.filtering {
 		m.filter, cmd = m.filter.Update(msg)
+		cmds = append(cmds, cmd)
 	}
 
 	switch msg := msg.(type) {
@@ -238,7 +245,6 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := m.title.shouldUpdate(); ok {
 			m.title.bindingsHash = hash
 			if !m.title.loadFromCache() {
-				m.title.val = "Loading..."
 				m.title.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateTitleMsg{id: m.id, title: m.title.fn(), hash: hash}
@@ -248,7 +254,6 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := m.description.shouldUpdate(); ok {
 			m.description.bindingsHash = hash
 			if !m.description.loadFromCache() {
-				m.description.val = "Loading..."
 				m.description.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateDescriptionMsg{id: m.id, description: m.description.fn(), hash: hash}
@@ -263,14 +268,22 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 				m.cursor = clamp(m.cursor, 0, len(m.filteredOptions)-1)
 			} else {
 				m.options.loading = true
+				m.options.loadingStart = time.Now()
 				cmds = append(cmds, func() tea.Msg {
 					return updateOptionsMsg[T]{id: m.id, options: m.options.fn(), hash: hash}
-				})
+				}, m.spinner.Tick)
 			}
 		}
 
 		return m, tea.Batch(cmds...)
 
+	case spinner.TickMsg:
+		if !m.options.loading {
+			break
+		}
+		m.spinner, cmd = m.spinner.Update(msg)
+		return m, cmd
+
 	case updateTitleMsg:
 		if msg.id == m.id && msg.hash == m.title.bindingsHash {
 			m.title.update(msg.title)
@@ -384,7 +397,7 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 	}
 
-	return m, cmd
+	return m, tea.Batch(cmds...)
 }
 
 // updateViewportHeight updates the viewport size according to the Height setting
@@ -464,8 +477,9 @@ func (m *MultiSelect[T]) optionsView() string {
 		sb     strings.Builder
 	)
 
-	if m.options.loading {
-		sb.WriteString(c + styles.SelectedOption.Render("Loading..."))
+	if m.options.loading && time.Since(m.options.loadingStart) > spinnerShowThreshold {
+		m.spinner.Style = m.activeStyles().MultiSelectSelector.UnsetString()
+		sb.WriteString(m.spinner.View() + " Loading...")
 		return sb.String()
 	}
 
@@ -498,6 +512,7 @@ func (m *MultiSelect[T]) optionsView() string {
 // View renders the multi-select field.
 func (m *MultiSelect[T]) View() string {
 	styles := m.activeStyles()
+
 	m.viewport.SetContent(m.optionsView())
 
 	var sb strings.Builder

field_note.go

@@ -51,7 +51,6 @@ func (n *Note) Title(title string) *Note {
 func (n *Note) TitleFunc(f func() string, bindings any) *Note {
 	n.title.fn = f
 	n.title.bindings = bindings
-	n.title.val = "Loading..."
 	return n
 }
 
@@ -66,7 +65,6 @@ func (n *Note) Description(description string) *Note {
 func (n *Note) DescriptionFunc(f func() string, bindings any) *Note {
 	n.description.fn = f
 	n.description.bindings = bindings
-	n.description.val = "Loading..."
 	return n
 }
 
@@ -127,7 +125,6 @@ func (n *Note) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := n.title.shouldUpdate(); ok {
 			n.title.bindingsHash = hash
 			if !n.title.loadFromCache() {
-				n.title.val = "Loading..."
 				n.title.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateTitleMsg{id: n.id, title: n.title.fn(), hash: hash}

field_select.go

@@ -116,7 +116,6 @@ func (s *Select[T]) Title(title string) *Select[T] {
 func (s *Select[T]) TitleFunc(f func() string, bindings any) *Select[T] {
 	s.title.fn = f
 	s.title.bindings = bindings
-	s.title.val = "Loading..."
 	return s
 }
 
@@ -130,7 +129,6 @@ func (s *Select[T]) Description(description string) *Select[T] {
 func (s *Select[T]) DescriptionFunc(f func() string, bindings any) *Select[T] {
 	s.description.fn = f
 	s.description.bindings = bindings
-	s.description.val = "Loading..."
 	return s
 }
 
@@ -271,7 +269,6 @@ func (s *Select[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := s.title.shouldUpdate(); ok {
 			s.title.bindingsHash = hash
 			if !s.title.loadFromCache() {
-				s.title.val = "Loading..."
 				s.title.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateTitleMsg{id: s.id, title: s.title.fn(), hash: hash}
@@ -474,9 +471,6 @@ func (s *Select[T]) titleView() string {
 }
 
 func (s *Select[T]) descriptionView() string {
-	if s.description.loading {
-		return s.activeStyles().Description.Render("Loading...")
-	}
 	return s.activeStyles().Description.Render(s.description.val)
 }
 
@@ -487,11 +481,6 @@ func (s *Select[T]) optionsView() string {
 		sb     strings.Builder
 	)
 
-	if s.options.loading {
-		sb.WriteString(c + styles.SelectedOption.Render("Loading..."))
-		return sb.String()
-	}
-
 	if s.inline {
 		sb.WriteString(styles.PrevIndicator.Faint(s.selected <= 0).String())
 		if len(s.filteredOptions) > 0 {

field_text.go

@@ -102,15 +102,13 @@ func (t *Text) Description(description string) *Text {
 func (t *Text) TitleFunc(f func() string, bindings any) *Text {
 	t.title.fn = f
 	t.title.bindings = bindings
-	t.title.val = "Loading..."
 	return t
 }
 
 // Description sets the description of the text field.
 func (t *Text) DescriptionFunc(f func() string, bindings any) *Text {
 	t.description.fn = f
 	t.description.bindings = bindings
-	t.description.val = "Loading..."
 	return t
 }
 
@@ -264,7 +262,6 @@ func (t *Text) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if ok, hash := t.description.shouldUpdate(); ok {
 			t.description.bindingsHash = hash
 			if !t.description.loadFromCache() {
-				t.description.val = "Loading..."
 				t.description.loading = true
 				cmds = append(cmds, func() tea.Msg {
 					return updateDescriptionMsg{id: t.id, description: t.description.fn(), hash: hash}

form.go

@@ -9,6 +9,7 @@ import (
 	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/paginator"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/log"
 )
 
 const defaultWidth = 80
@@ -551,6 +552,12 @@ func (f *Form) View() string {
 
 // Run runs the form.
 func (f *Form) Run() error {
+	debugFile, err := tea.LogToFile("debug.log", "debug")
+	if err != nil {
+		return err
+	}
+	log.SetOutput(debugFile)
+
 	f.submitCmd = tea.Quit
 	f.cancelCmd = tea.Quit
 

go.mod

@@ -7,6 +7,7 @@ require (
 	github.com/charmbracelet/bubbles v0.18.0
 	github.com/charmbracelet/bubbletea v0.26.1
 	github.com/charmbracelet/lipgloss v0.10.1-0.20240506202754-3ee5dcab73cb
+	github.com/charmbracelet/log v0.4.0
 	github.com/charmbracelet/x/exp/strings v0.0.0-20240506152644-8135bef4e495
 	github.com/charmbracelet/x/exp/term v0.0.0-20240506152644-8135bef4e495
 	github.com/mitchellh/hashstructure/v2 v2.0.2
@@ -17,6 +18,7 @@ require (
 	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f // indirect
+	github.com/go-logfmt/logfmt v0.6.0 // indirect
 	github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mattn/go-localereader v0.0.1 // indirect
@@ -26,6 +28,7 @@ require (
 	github.com/muesli/reflow v0.3.0 // indirect
 	github.com/muesli/termenv v0.15.2 // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect
+	golang.org/x/exp v0.0.0-20231006140011-7918f672742d // indirect
 	golang.org/x/sync v0.7.0 // indirect
 	golang.org/x/sys v0.20.0 // indirect
 	golang.org/x/term v0.20.0 // indirect