Lots of changing progress bars lead to flicker

[johneke]

👋 hello folks, and thank you for this amazing library. I'm diving in for the first time and learning by building a dashboard but I ran into an interesting scenario. If I have lots of progressbars on the screen (say 20 or more), the transitions are no longer smoothe and you begin to see flicker.

Is this known/expected? I checked the docs and I didn't see any notes around best practices to avoid jank so I apologize if Ive missed something obvious but if anyone has any pointers, I'd really appreciate it 🙏. Minimal code to reproduce below, after setting NumProgressBars = 5 you no longer see flicker and things are smoother

package main

import (
	"log"
	"math/rand"
	"strings"
	"time"

	"github.com/charmbracelet/bubbles/progress"
	tea "github.com/charmbracelet/bubbletea"
)

const (
	NumProgressBars = 20
)

type tickMsg time.Time

type model struct {
	width int
}

func (m model) Init() tea.Cmd {
	return tea.Batch(tick(), tea.EnterAltScreen)
}

func (m model) Update(message tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := message.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "q", "esc", "ctrl+c":
			return m, tea.Quit
		}

	case tea.WindowSizeMsg:
		m.width = msg.Width
		return m, tick()

	case tickMsg:
		return m, tick()
	}

	return m, nil
}

func (m model) View() string {
	view := []string{}

	for i := 0; i < NumProgressBars; i++ {
		view = append(view, progress.New(progress.WithDefaultGradient(), progress.WithWidth(m.width)).ViewAs(rand.Float64()))
	}

	return strings.Join(view, "\n\n")
}

func tick() tea.Cmd {
	return tea.Tick(time.Second, func(t time.Time) tea.Msg {
		return tickMsg(t)
	})
}

func main() {
	p := tea.NewProgram(model{}, tea.WithAltScreen())
	if _, err := p.Run(); err != nil {
		log.Fatal(err)
	}
}

[ndsizeif]

What terminal emulator are you using? It can also impact behavior.

Ran your code using several different emulators @ 1920x1080
gnome-terminal: flicker-free
konsole: occasional flickering
alacritty: decent, but not as smooth as gnome (i need a better gpu)
tty: flickers, but a surprisingly decent experience.

Then I ran the code inside a tmux session with each of those emulators and found
that their was certainly additional instances of flickering, but the frequency
varied based on the emulator I used. For the most part, gnome-terminal was
smooth to me, some others not so much.

Noticed that in the code you are using progress.WithDefaultGradient(). To test
if the colors were a contributing factor I instead used progress.WithSolidFill
re-ran and there was substantially less flicker or zero flicker in the terminals
that exhibited the behavior previously.

I found reducing the terminal window size positively impacts rendering.
Alternatively, reducing progress bar width when in a fullscreen window can
reduce or eliminate flickering progress.WithWidth(m.width / 2) .

TLDR; reduce bar width or use less color to render more bars without flicker.

Experimenting with animating progress bars in my projects, I found issues with
performance when animating several bars at once (they can block the program
and take seconds to animate). I think this ultimately comes down to the amount
of calculation being done in an application (number of bars, size, colors,
animation) along with the settings/capabilities of the terminal used.
Personally, I'm trying to figure out how to set bar progress on the initial view,
like using ViewAs() , and subsequently use View() animation for changes to keep
the initial cost low. I would appreciate insight as well.