feat(ui): add progress bar overlay for webpage loading

commit: 305b057830dd051df2d075e018a350d5e120e3de
author: bnema · 10mo ago · 2025-12-17 21:23 UTC
parent: 445f033
signature: unsigned

7 files · +372 -6

M go.mod +20 -1


@@ -4,6 +4,9 @@ go 1.25.3
4	4
5	5		require (
6	6		github.com/bnema/puregotk-webkit v0.0.0-00010101000000-000000000000
	7	+	github.com/charmbracelet/bubbles v0.21.0
	8	+	github.com/charmbracelet/bubbletea v1.3.10
	9	+	github.com/charmbracelet/lipgloss v1.1.0
7	10		github.com/fsnotify/fsnotify v1.9.0
8	11		github.com/jwijenbergh/puregotk v0.0.0-20251022075221-eae1610c7d83
9	12		github.com/ncruces/go-sqlite3 v0.30.3

@@ -15,25 +18,41 @@ require (
15	18		)
16	19
17	20		require (
	21	+	github.com/atotto/clipboard v0.1.4 // indirect
	22	+	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
	23	+	github.com/charmbracelet/colorprofile v0.2.3-0.20250311203215-f60798e515dc // indirect
	24	+	github.com/charmbracelet/x/ansi v0.10.1 // indirect
	25	+	github.com/charmbracelet/x/cellbuf v0.0.13-0.20250311204145-2c3ea96c31dd // indirect
	26	+	github.com/charmbracelet/x/term v0.2.1 // indirect
18	27		github.com/davecgh/go-spew v1.1.1 // indirect
	28	+	github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f // indirect
19	29		github.com/go-viper/mapstructure/v2 v2.4.0 // indirect
	30	+	github.com/inconshreveable/mousetrap v1.1.0 // indirect
20	31		github.com/jwijenbergh/purego v0.0.0-20251017112123-b71757b9ba42 // indirect
21		-	github.com/kylelemons/godebug v1.1.0 // indirect
	32	+	github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
22	33		github.com/mattn/go-colorable v0.1.13 // indirect
23	34		github.com/mattn/go-isatty v0.0.20 // indirect
	35	+	github.com/mattn/go-localereader v0.0.1 // indirect
	36	+	github.com/mattn/go-runewidth v0.0.16 // indirect
24	37		github.com/mfridman/interpolate v0.0.2 // indirect
	38	+	github.com/muesli/ansi v0.0.0-20230316100256-276c6243b2f6 // indirect
	39	+	github.com/muesli/cancelreader v0.2.2 // indirect
	40	+	github.com/muesli/termenv v0.16.0 // indirect
25	41		github.com/ncruces/julianday v1.0.0 // indirect
26	42		github.com/pelletier/go-toml/v2 v2.2.4 // indirect
27	43		github.com/pmezard/go-difflib v1.0.0 // indirect
	44	+	github.com/rivo/uniseg v0.4.7 // indirect
28	45		github.com/sagikazarmark/locafero v0.11.0 // indirect
29	46		github.com/sethvargo/go-retry v0.3.0 // indirect
30	47		github.com/sourcegraph/conc v0.3.1-0.20240121214520-5f936abd7ae8 // indirect
31	48		github.com/spf13/afero v1.15.0 // indirect
32	49		github.com/spf13/cast v1.10.0 // indirect
	50	+	github.com/spf13/cobra v1.10.2 // indirect
33	51		github.com/spf13/pflag v1.0.10 // indirect
34	52		github.com/stretchr/objx v0.5.2 // indirect
35	53		github.com/subosito/gotenv v1.6.0 // indirect
36	54		github.com/tetratelabs/wazero v1.10.1 // indirect
	55	+	github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e // indirect
37	56		go.uber.org/multierr v1.11.0 // indirect
38	57		go.yaml.in/yaml/v3 v3.0.4 // indirect
39	58		golang.org/x/sync v0.18.0 // indirect

 require (
 	github.com/bnema/puregotk-webkit v0.0.0-00010101000000-000000000000
+	github.com/charmbracelet/bubbles v0.21.0
+	github.com/charmbracelet/bubbletea v1.3.10
+	github.com/charmbracelet/lipgloss v1.1.0
 	github.com/fsnotify/fsnotify v1.9.0
 	github.com/jwijenbergh/puregotk v0.0.0-20251022075221-eae1610c7d83
 	github.com/ncruces/go-sqlite3 v0.30.3
 )
 require (
+	github.com/atotto/clipboard v0.1.4 // indirect
+	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
+	github.com/charmbracelet/colorprofile v0.2.3-0.20250311203215-f60798e515dc // indirect
+	github.com/charmbracelet/x/ansi v0.10.1 // indirect
+	github.com/charmbracelet/x/cellbuf v0.0.13-0.20250311204145-2c3ea96c31dd // indirect
+	github.com/charmbracelet/x/term v0.2.1 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f // indirect
 	github.com/go-viper/mapstructure/v2 v2.4.0 // indirect
+	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/jwijenbergh/purego v0.0.0-20251017112123-b71757b9ba42 // indirect
-	github.com/kylelemons/godebug v1.1.0 // indirect
+	github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-localereader v0.0.1 // indirect
+	github.com/mattn/go-runewidth v0.0.16 // indirect
 	github.com/mfridman/interpolate v0.0.2 // indirect
+	github.com/muesli/ansi v0.0.0-20230316100256-276c6243b2f6 // indirect
+	github.com/muesli/cancelreader v0.2.2 // indirect
+	github.com/muesli/termenv v0.16.0 // indirect
 	github.com/ncruces/julianday v1.0.0 // indirect
 	github.com/pelletier/go-toml/v2 v2.2.4 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
+	github.com/rivo/uniseg v0.4.7 // indirect
 	github.com/sagikazarmark/locafero v0.11.0 // indirect
 	github.com/sethvargo/go-retry v0.3.0 // indirect
 	github.com/sourcegraph/conc v0.3.1-0.20240121214520-5f936abd7ae8 // indirect
 	github.com/spf13/afero v1.15.0 // indirect
 	github.com/spf13/cast v1.10.0 // indirect
+	github.com/spf13/cobra v1.10.2 // indirect
 	github.com/spf13/pflag v1.0.10 // indirect
 	github.com/stretchr/objx v0.5.2 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
 	github.com/tetratelabs/wazero v1.10.1 // indirect
+	github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e // indirect
 	go.uber.org/multierr v1.11.0 // indirect
 	go.yaml.in/yaml/v3 v3.0.4 // indirect
 	golang.org/x/sync v0.18.0 // indirect

M go.sum +49 -0 generated file: collapsed

load diff

M internal/infrastructure/webkit/webview.go +15 -0


@@ -322,6 +322,21 @@ func (wv *WebView) connectSignals() {
322	322		}
323	323		sigID = gobject.SignalConnect(wv.inner.GoPointer(), "notify::favicon", glib.NewCallback(&faviconCb))
324	324		wv.signalIDs = append(wv.signalIDs, sigID)
	325	+
	326	+	// notify::estimated-load-progress signal for load progress updates
	327	+	// This fires frequently during page load with values from 0.0 to 1.0
	328	+	progressCb := func() {
	329	+	progress := wv.inner.GetEstimatedLoadProgress()
	330	+	wv.mu.Lock()
	331	+	wv.progress = progress
	332	+	wv.mu.Unlock()
	333	+
	334	+	if wv.OnProgressChanged != nil {
	335	+	wv.OnProgressChanged(progress)
	336	+	}
	337	+	}
	338	+	sigID = gobject.SignalConnect(wv.inner.GoPointer(), "notify::estimated-load-progress", glib.NewCallback(&progressCb))
	339	+	wv.signalIDs = append(wv.signalIDs, sigID)
325	340		}
326	341
327	342		// ID returns the unique identifier for this WebView.


@@ -322,6 +322,21 @@ func (wv *WebView) connectSignals() {
322	}	322		}
323	sigID = gobject.SignalConnect(wv.inner.GoPointer(), "notify::favicon", glib.NewCallback(&faviconCb))	323		sigID = gobject.SignalConnect(wv.inner.GoPointer(), "notify::favicon", glib.NewCallback(&faviconCb))
324	wv.signalIDs = append(wv.signalIDs, sigID)	324		wv.signalIDs = append(wv.signalIDs, sigID)
		325	+
		326	+	// notify::estimated-load-progress signal for load progress updates
		327	+	// This fires frequently during page load with values from 0.0 to 1.0
		328	+	progressCb := func() {
		329	+	progress := wv.inner.GetEstimatedLoadProgress()
		330	+	wv.mu.Lock()
		331	+	wv.progress = progress
		332	+	wv.mu.Unlock()
		333	+
		334	+	if wv.OnProgressChanged != nil {
		335	+	wv.OnProgressChanged(progress)
		336	+	}
		337	+	}
		338	+	sigID = gobject.SignalConnect(wv.inner.GoPointer(), "notify::estimated-load-progress", glib.NewCallback(&progressCb))
		339	+	wv.signalIDs = append(wv.signalIDs, sigID)
325	}	340		}
326		341
327	// ID returns the unique identifier for this WebView.	342		// ID returns the unique identifier for this WebView.

M internal/ui/component/pane_view.go +35 -0


@@ -22,6 +22,7 @@ type PaneView struct {
22	22		overlay layout.OverlayWidget
23	23		webViewWidget layout.Widget // The actual WebView widget
24	24		borderBox layout.BoxWidget // Border overlay for active indication
	25	+	progressBar *ProgressBar // Loading progress indicator
25	26		paneID entity.PaneID
26	27		isActive bool
27	28

@@ -62,11 +63,18 @@ func NewPaneView(factory layout.WidgetFactory, paneID entity.PaneID, webViewWidg
62	63		overlay.SetClipOverlay(borderBox, false)
63	64		overlay.SetMeasureOverlay(borderBox, false)
64	65
	66	+	// Create progress bar overlay at bottom
	67	+	progressBar := NewProgressBar(factory)
	68	+	overlay.AddOverlay(progressBar.Widget())
	69	+	overlay.SetClipOverlay(progressBar.Widget(), false)
	70	+	overlay.SetMeasureOverlay(progressBar.Widget(), false)
	71	+
65	72		return &PaneView{
66	73		factory: factory,
67	74		overlay: overlay,
68	75		webViewWidget: webViewWidget,
69	76		borderBox: borderBox,
	77	+	progressBar: progressBar,
70	78		paneID: paneID,
71	79		isActive: false,
72	80		}

@@ -267,3 +275,30 @@ func (pv *PaneView) RemoveOverlayWidget(widget layout.Widget) {
267	275		func (pv *PaneView) GetContentDimensions() (width, height int) {
268	276		return pv.overlay.GetAllocatedWidth(), pv.overlay.GetAllocatedHeight()
269	277		}
	278	+
	279	+	// SetLoadProgress updates the progress bar with the current load progress.
	280	+	// progress should be between 0.0 and 1.0.
	281	+	func (pv *PaneView) SetLoadProgress(progress float64) {
	282	+	pv.mu.RLock()
	283	+	pb := pv.progressBar
	284	+	pv.mu.RUnlock()
	285	+
	286	+	if pb != nil {
	287	+	pb.SetProgress(progress)
	288	+	}
	289	+	}
	290	+
	291	+	// SetLoading shows or hides the progress bar.
	292	+	func (pv *PaneView) SetLoading(loading bool) {
	293	+	pv.mu.RLock()
	294	+	pb := pv.progressBar
	295	+	pv.mu.RUnlock()
	296	+
	297	+	if pb != nil {
	298	+	if loading {
	299	+	pb.Show()
	300	+	} else {
	301	+	pb.Hide()
	302	+	}
	303	+	}
	304	+	}


@@ -22,6 +22,7 @@ type PaneView struct {
22	overlay layout.OverlayWidget	22		overlay layout.OverlayWidget
23	webViewWidget layout.Widget // The actual WebView widget	23		webViewWidget layout.Widget // The actual WebView widget
24	borderBox layout.BoxWidget // Border overlay for active indication	24		borderBox layout.BoxWidget // Border overlay for active indication
		25	+	progressBar *ProgressBar // Loading progress indicator
25	paneID entity.PaneID	26		paneID entity.PaneID
26	isActive bool	27		isActive bool
27		28

@@ -62,11 +63,18 @@ func NewPaneView(factory layout.WidgetFactory, paneID entity.PaneID, webViewWidg
62	overlay.SetClipOverlay(borderBox, false)	63		overlay.SetClipOverlay(borderBox, false)
63	overlay.SetMeasureOverlay(borderBox, false)	64		overlay.SetMeasureOverlay(borderBox, false)
64		65
		66	+	// Create progress bar overlay at bottom
		67	+	progressBar := NewProgressBar(factory)
		68	+	overlay.AddOverlay(progressBar.Widget())
		69	+	overlay.SetClipOverlay(progressBar.Widget(), false)
		70	+	overlay.SetMeasureOverlay(progressBar.Widget(), false)
		71	+
65	return &PaneView{	72		return &PaneView{
66	factory: factory,	73		factory: factory,
67	overlay: overlay,	74		overlay: overlay,
68	webViewWidget: webViewWidget,	75		webViewWidget: webViewWidget,
69	borderBox: borderBox,	76		borderBox: borderBox,
		77	+	progressBar: progressBar,
70	paneID: paneID,	78		paneID: paneID,
71	isActive: false,	79		isActive: false,
72	}	80		}

@@ -267,3 +275,30 @@ func (pv *PaneView) RemoveOverlayWidget(widget layout.Widget) {
267	func (pv *PaneView) GetContentDimensions() (width, height int) {	275		func (pv *PaneView) GetContentDimensions() (width, height int) {
268	return pv.overlay.GetAllocatedWidth(), pv.overlay.GetAllocatedHeight()	276		return pv.overlay.GetAllocatedWidth(), pv.overlay.GetAllocatedHeight()
269	}	277		}
		278	+
		279	+	// SetLoadProgress updates the progress bar with the current load progress.
		280	+	// progress should be between 0.0 and 1.0.
		281	+	func (pv *PaneView) SetLoadProgress(progress float64) {
		282	+	pv.mu.RLock()
		283	+	pb := pv.progressBar
		284	+	pv.mu.RUnlock()
		285	+
		286	+	if pb != nil {
		287	+	pb.SetProgress(progress)
		288	+	}
		289	+	}
		290	+
		291	+	// SetLoading shows or hides the progress bar.
		292	+	func (pv *PaneView) SetLoading(loading bool) {
		293	+	pv.mu.RLock()
		294	+	pb := pv.progressBar
		295	+	pv.mu.RUnlock()
		296	+
		297	+	if pb != nil {
		298	+	if loading {
		299	+	pb.Show()
		300	+	} else {
		301	+	pb.Hide()
		302	+	}
		303	+	}
		304	+	}

A internal/ui/component/progress_bar.go +174 -0

@@ -0,0 +1,174 @@
	1	+	// Package component provides UI components for the browser.
	2	+	package component
	3	+
	4	+	import (
	5	+	"sync"
	6	+
	7	+	"github.com/jwijenbergh/puregotk/v4/glib"
	8	+	"github.com/jwijenbergh/puregotk/v4/gtk"
	9	+
	10	+	"github.com/bnema/dumber/internal/ui/layout"
	11	+	)
	12	+
	13	+	const (
	14	+	// Animation step size - how much to increment per frame
	15	+	progressStep = 0.02
	16	+	// Animation interval in milliseconds
	17	+	progressIntervalMs = 16 // ~60fps
	18	+	)
	19	+
	20	+	// ProgressBar displays a slim loading progress indicator at the bottom of a pane.
	21	+	// Uses native GtkProgressBar with "osd" styling for overlay appearance.
	22	+	// Implements smooth animation by incrementing towards the target value.
	23	+	type ProgressBar struct {
	24	+	factory layout.WidgetFactory
	25	+	progressBar *gtk.ProgressBar
	26	+	widget layout.Widget // Wrapped widget for layout compatibility
	27	+
	28	+	visible bool
	29	+	currentValue float64 // Current displayed value
	30	+	targetValue float64 // Target value to animate towards
	31	+	animationTimer uint // Timer source ID for animation
	32	+
	33	+	mu sync.Mutex
	34	+	}
	35	+
	36	+	// NewProgressBar creates a new progress bar component using native GtkProgressBar.
	37	+	func NewProgressBar(factory layout.WidgetFactory) *ProgressBar {
	38	+	progressBar := gtk.NewProgressBar()
	39	+
	40	+	// Add "osd" class for on-screen-display overlay styling (like Epiphany)
	41	+	progressBar.AddCssClass("osd")
	42	+
	43	+	// Position at bottom, full width
	44	+	progressBar.SetValign(gtk.AlignEndValue)
	45	+	progressBar.SetHalign(gtk.AlignFillValue)
	46	+	progressBar.SetHexpand(true)
	47	+
	48	+	// Don't intercept pointer events - let clicks pass through to WebView
	49	+	progressBar.SetCanTarget(false)
	50	+	progressBar.SetCanFocus(false)
	51	+
	52	+	// Hidden by default
	53	+	progressBar.SetVisible(false)
	54	+
	55	+	// Wrap for layout compatibility
	56	+	widget := factory.WrapWidget(&progressBar.Widget)
	57	+
	58	+	return &ProgressBar{
	59	+	factory: factory,
	60	+	progressBar: progressBar,
	61	+	widget: widget,
	62	+	visible: false,
	63	+	currentValue: 0,
	64	+	targetValue: 0,
	65	+	}
	66	+	}
	67	+
	68	+	// SetProgress sets the target progress value and starts smooth animation.
	69	+	// progress should be between 0.0 and 1.0.
	70	+	func (pb *ProgressBar) SetProgress(progress float64) {
	71	+	pb.mu.Lock()
	72	+	defer pb.mu.Unlock()
	73	+
	74	+	// Clamp progress to valid range
	75	+	if progress < 0 {
	76	+	progress = 0
	77	+	} else if progress > 1 {
	78	+	progress = 1
	79	+	}
	80	+
	81	+	pb.targetValue = progress
	82	+
	83	+	// For large jumps (>0.3) or completion, update immediately
	84	+	diff := progress - pb.currentValue
	85	+	if diff > 0.3 \|\| progress >= 1.0 {
	86	+	pb.currentValue = progress
	87	+	pb.progressBar.SetFraction(progress)
	88	+	return
	89	+	}
	90	+
	91	+	// Start animation if not already running
	92	+	if pb.animationTimer == 0 {
	93	+	pb.startAnimation()
	94	+	}
	95	+	}
	96	+
	97	+	// startAnimation begins the smooth progress animation.
	98	+	// Must be called with lock held.
	99	+	func (pb *ProgressBar) startAnimation() {
	100	+	var cb glib.SourceFunc
	101	+	cb = func(_ uintptr) bool {
	102	+	pb.mu.Lock()
	103	+	defer pb.mu.Unlock()
	104	+
	105	+	// Check if we've reached the target
	106	+	if pb.currentValue >= pb.targetValue {
	107	+	pb.animationTimer = 0
	108	+	return false // Stop the timer
	109	+	}
	110	+
	111	+	// Increment towards target
	112	+	pb.currentValue += progressStep
	113	+	if pb.currentValue > pb.targetValue {
	114	+	pb.currentValue = pb.targetValue
	115	+	}
	116	+
	117	+	pb.progressBar.SetFraction(pb.currentValue)
	118	+
	119	+	// Continue animation if not at target
	120	+	return pb.currentValue < pb.targetValue
	121	+	}
	122	+
	123	+	pb.animationTimer = glib.TimeoutAdd(progressIntervalMs, &cb, 0)
	124	+	}
	125	+
	126	+	// Show makes the progress bar visible.
	127	+	func (pb *ProgressBar) Show() {
	128	+	pb.mu.Lock()
	129	+	defer pb.mu.Unlock()
	130	+
	131	+	if !pb.visible {
	132	+	pb.visible = true
	133	+	pb.progressBar.SetVisible(true)
	134	+	}
	135	+	}
	136	+
	137	+	// Hide makes the progress bar invisible and resets state.
	138	+	func (pb *ProgressBar) Hide() {
	139	+	pb.mu.Lock()
	140	+	defer pb.mu.Unlock()
	141	+
	142	+	if pb.visible {
	143	+	pb.visible = false
	144	+	pb.progressBar.SetVisible(false)
	145	+
	146	+	// Stop any running animation
	147	+	if pb.animationTimer != 0 {
	148	+	glib.SourceRemove(pb.animationTimer)
	149	+	pb.animationTimer = 0
	150	+	}
	151	+
	152	+	// Reset values
	153	+	pb.currentValue = 0
	154	+	pb.targetValue = 0
	155	+	pb.progressBar.SetFraction(0)
	156	+	}
	157	+	}
	158	+
	159	+	// IsVisible returns whether the progress bar is currently visible.
	160	+	func (pb *ProgressBar) IsVisible() bool {
	161	+	pb.mu.Lock()
	162	+	defer pb.mu.Unlock()
	163	+	return pb.visible
	164	+	}
	165	+
	166	+	// Widget returns the underlying GtkProgressBar widget for embedding in overlays.
	167	+	func (pb *ProgressBar) Widget() layout.Widget {
	168	+	return pb.widget
	169	+	}
	170	+
	171	+	// GtkWidget returns the raw GtkProgressBar for direct GTK operations.
	172	+	func (pb ProgressBar) GtkWidget() gtk.ProgressBar {
	173	+	return pb.progressBar
	174	+	}

@@ -0,0 +1,174 @@
	1	+	// Package component provides UI components for the browser.
	2	+	package component
	3	+
	4	+	import (
	5	+	"sync"
	6	+
	7	+	"github.com/jwijenbergh/puregotk/v4/glib"
	8	+	"github.com/jwijenbergh/puregotk/v4/gtk"
	9	+
	10	+	"github.com/bnema/dumber/internal/ui/layout"
	11	+	)
	12	+
	13	+	const (
	14	+	// Animation step size - how much to increment per frame
	15	+	progressStep = 0.02
	16	+	// Animation interval in milliseconds
	17	+	progressIntervalMs = 16 // ~60fps
	18	+	)
	19	+
	20	+	// ProgressBar displays a slim loading progress indicator at the bottom of a pane.
	21	+	// Uses native GtkProgressBar with "osd" styling for overlay appearance.
	22	+	// Implements smooth animation by incrementing towards the target value.
	23	+	type ProgressBar struct {
	24	+	factory layout.WidgetFactory
	25	+	progressBar *gtk.ProgressBar
	26	+	widget layout.Widget // Wrapped widget for layout compatibility
	27	+
	28	+	visible bool
	29	+	currentValue float64 // Current displayed value
	30	+	targetValue float64 // Target value to animate towards
	31	+	animationTimer uint // Timer source ID for animation
	32	+
	33	+	mu sync.Mutex
	34	+	}
	35	+
	36	+	// NewProgressBar creates a new progress bar component using native GtkProgressBar.
	37	+	func NewProgressBar(factory layout.WidgetFactory) *ProgressBar {
	38	+	progressBar := gtk.NewProgressBar()
	39	+
	40	+	// Add "osd" class for on-screen-display overlay styling (like Epiphany)
	41	+	progressBar.AddCssClass("osd")
	42	+
	43	+	// Position at bottom, full width
	44	+	progressBar.SetValign(gtk.AlignEndValue)
	45	+	progressBar.SetHalign(gtk.AlignFillValue)
	46	+	progressBar.SetHexpand(true)
	47	+
	48	+	// Don't intercept pointer events - let clicks pass through to WebView
	49	+	progressBar.SetCanTarget(false)
	50	+	progressBar.SetCanFocus(false)
	51	+
	52	+	// Hidden by default
	53	+	progressBar.SetVisible(false)
	54	+
	55	+	// Wrap for layout compatibility
	56	+	widget := factory.WrapWidget(&progressBar.Widget)
	57	+
	58	+	return &ProgressBar{
	59	+	factory: factory,
	60	+	progressBar: progressBar,
	61	+	widget: widget,
	62	+	visible: false,
	63	+	currentValue: 0,
	64	+	targetValue: 0,
	65	+	}
	66	+	}
	67	+
	68	+	// SetProgress sets the target progress value and starts smooth animation.
	69	+	// progress should be between 0.0 and 1.0.
	70	+	func (pb *ProgressBar) SetProgress(progress float64) {
	71	+	pb.mu.Lock()
	72	+	defer pb.mu.Unlock()
	73	+
	74	+	// Clamp progress to valid range
	75	+	if progress < 0 {
	76	+	progress = 0
	77	+	} else if progress > 1 {
	78	+	progress = 1
	79	+	}
	80	+
	81	+	pb.targetValue = progress
	82	+
	83	+	// For large jumps (>0.3) or completion, update immediately
	84	+	diff := progress - pb.currentValue
	85	+	if diff > 0.3 \|\| progress >= 1.0 {
	86	+	pb.currentValue = progress
	87	+	pb.progressBar.SetFraction(progress)
	88	+	return
	89	+	}
	90	+
	91	+	// Start animation if not already running
	92	+	if pb.animationTimer == 0 {
	93	+	pb.startAnimation()
	94	+	}
	95	+	}
	96	+
	97	+	// startAnimation begins the smooth progress animation.
	98	+	// Must be called with lock held.
	99	+	func (pb *ProgressBar) startAnimation() {
	100	+	var cb glib.SourceFunc
	101	+	cb = func(_ uintptr) bool {
	102	+	pb.mu.Lock()
	103	+	defer pb.mu.Unlock()
	104	+
	105	+	// Check if we've reached the target
	106	+	if pb.currentValue >= pb.targetValue {
	107	+	pb.animationTimer = 0
	108	+	return false // Stop the timer
	109	+	}
	110	+
	111	+	// Increment towards target
	112	+	pb.currentValue += progressStep
	113	+	if pb.currentValue > pb.targetValue {
	114	+	pb.currentValue = pb.targetValue
	115	+	}
	116	+
	117	+	pb.progressBar.SetFraction(pb.currentValue)
	118	+
	119	+	// Continue animation if not at target
	120	+	return pb.currentValue < pb.targetValue
	121	+	}
	122	+
	123	+	pb.animationTimer = glib.TimeoutAdd(progressIntervalMs, &cb, 0)
	124	+	}
	125	+
	126	+	// Show makes the progress bar visible.
	127	+	func (pb *ProgressBar) Show() {
	128	+	pb.mu.Lock()
	129	+	defer pb.mu.Unlock()
	130	+
	131	+	if !pb.visible {
	132	+	pb.visible = true
	133	+	pb.progressBar.SetVisible(true)
	134	+	}
	135	+	}
	136	+
	137	+	// Hide makes the progress bar invisible and resets state.
	138	+	func (pb *ProgressBar) Hide() {
	139	+	pb.mu.Lock()
	140	+	defer pb.mu.Unlock()
	141	+
	142	+	if pb.visible {
	143	+	pb.visible = false
	144	+	pb.progressBar.SetVisible(false)
	145	+
	146	+	// Stop any running animation
	147	+	if pb.animationTimer != 0 {
	148	+	glib.SourceRemove(pb.animationTimer)
	149	+	pb.animationTimer = 0
	150	+	}
	151	+
	152	+	// Reset values
	153	+	pb.currentValue = 0
	154	+	pb.targetValue = 0
	155	+	pb.progressBar.SetFraction(0)
	156	+	}
	157	+	}
	158	+
	159	+	// IsVisible returns whether the progress bar is currently visible.
	160	+	func (pb *ProgressBar) IsVisible() bool {
	161	+	pb.mu.Lock()
	162	+	defer pb.mu.Unlock()
	163	+	return pb.visible
	164	+	}
	165	+
	166	+	// Widget returns the underlying GtkProgressBar widget for embedding in overlays.
	167	+	func (pb *ProgressBar) Widget() layout.Widget {
	168	+	return pb.widget
	169	+	}
	170	+
	171	+	// GtkWidget returns the raw GtkProgressBar for direct GTK operations.
	172	+	func (pb ProgressBar) GtkWidget() gtk.ProgressBar {
	173	+	return pb.progressBar
	174	+	}

M internal/ui/coordinator/content.go +51 -2


@@ -113,13 +113,23 @@ func (c *ContentCoordinator) EnsureWebView(ctx context.Context, paneID entity.Pa
113	113		c.onFaviconChanged(ctx, paneID, favicon)
114	114		}
115	115
116		-	// Set up load change callback to re-apply zoom on navigation
	116	+	// Set up load change callback to re-apply zoom on navigation and handle progress bar
117	117		wv.OnLoadChanged = func(event webkit.LoadEvent) {
118		-	if event == webkit.LoadCommitted {
	118	+	switch event {
	119	+	case webkit.LoadStarted:
	120	+	c.onLoadStarted(ctx, paneID)
	121	+	case webkit.LoadCommitted:
119	122		c.onLoadCommitted(ctx, paneID, wv)
	123	+	case webkit.LoadFinished:
	124	+	c.onLoadFinished(ctx, paneID)
120	125		}
121	126		}
122	127
	128	+	// Set up progress callback for loading indicator
	129	+	wv.OnProgressChanged = func(progress float64) {
	130	+	c.onProgressChanged(ctx, paneID, progress)
	131	+	}
	132	+
123	133		// Set up URI change callback for SPA navigation (History API)
124	134		// This fires when URL changes via JavaScript without a full page load
125	135		wv.OnURIChanged = func(uri string) {

@@ -479,3 +489,42 @@ func (c *ContentCoordinator) onSPANavigation(ctx context.Context, paneID entity.
479	489		c.onHistoryRecord(ctx, paneID, url)
480	490		}
481	491		}
	492	+
	493	+	// onLoadStarted shows the progress bar when page loading begins.
	494	+	func (c *ContentCoordinator) onLoadStarted(ctx context.Context, paneID entity.PaneID) {
	495	+	_, wsView := c.getActiveWS()
	496	+	if wsView == nil {
	497	+	return
	498	+	}
	499	+
	500	+	paneView := wsView.GetPaneView(paneID)
	501	+	if paneView != nil {
	502	+	paneView.SetLoading(true)
	503	+	}
	504	+	}
	505	+
	506	+	// onLoadFinished hides the progress bar when page loading completes.
	507	+	func (c *ContentCoordinator) onLoadFinished(ctx context.Context, paneID entity.PaneID) {
	508	+	_, wsView := c.getActiveWS()
	509	+	if wsView == nil {
	510	+	return
	511	+	}
	512	+
	513	+	paneView := wsView.GetPaneView(paneID)
	514	+	if paneView != nil {
	515	+	paneView.SetLoading(false)
	516	+	}
	517	+	}
	518	+
	519	+	// onProgressChanged updates the progress bar with current load progress.
	520	+	func (c *ContentCoordinator) onProgressChanged(ctx context.Context, paneID entity.PaneID, progress float64) {
	521	+	_, wsView := c.getActiveWS()
	522	+	if wsView == nil {
	523	+	return
	524	+	}
	525	+
	526	+	paneView := wsView.GetPaneView(paneID)
	527	+	if paneView != nil {
	528	+	paneView.SetLoadProgress(progress)
	529	+	}
	530	+	}


@@ -113,13 +113,23 @@ func (c *ContentCoordinator) EnsureWebView(ctx context.Context, paneID entity.Pa
113		c.onFaviconChanged(ctx, paneID, favicon)	113		c.onFaviconChanged(ctx, paneID, favicon)
114		}	114		}
115			115
116	-	// Set up load change callback to re-apply zoom on navigation	116	+	// Set up load change callback to re-apply zoom on navigation and handle progress bar
117		wv.OnLoadChanged = func(event webkit.LoadEvent) {	117		wv.OnLoadChanged = func(event webkit.LoadEvent) {
118	-	if event == webkit.LoadCommitted {	118	+	switch event {
			119	+	case webkit.LoadStarted:
			120	+	c.onLoadStarted(ctx, paneID)
			121	+	case webkit.LoadCommitted:
119		c.onLoadCommitted(ctx, paneID, wv)	122		c.onLoadCommitted(ctx, paneID, wv)
			123	+	case webkit.LoadFinished:
			124	+	c.onLoadFinished(ctx, paneID)
120		}	125		}
121		}	126		}
122			127
			128	+	// Set up progress callback for loading indicator
			129	+	wv.OnProgressChanged = func(progress float64) {
			130	+	c.onProgressChanged(ctx, paneID, progress)
			131	+	}
			132	+
123		// Set up URI change callback for SPA navigation (History API)	133		// Set up URI change callback for SPA navigation (History API)
124		// This fires when URL changes via JavaScript without a full page load	134		// This fires when URL changes via JavaScript without a full page load
125		wv.OnURIChanged = func(uri string) {	135		wv.OnURIChanged = func(uri string) {

@@ -479,3 +489,42 @@ func (c *ContentCoordinator) onSPANavigation(ctx context.Context, paneID entity.
479		c.onHistoryRecord(ctx, paneID, url)	489		c.onHistoryRecord(ctx, paneID, url)
480		}	490		}
481		}	491		}
			492	+
			493	+	// onLoadStarted shows the progress bar when page loading begins.
			494	+	func (c *ContentCoordinator) onLoadStarted(ctx context.Context, paneID entity.PaneID) {
			495	+	_, wsView := c.getActiveWS()
			496	+	if wsView == nil {
			497	+	return
			498	+	}
			499	+
			500	+	paneView := wsView.GetPaneView(paneID)
			501	+	if paneView != nil {
			502	+	paneView.SetLoading(true)
			503	+	}
			504	+	}
			505	+
			506	+	// onLoadFinished hides the progress bar when page loading completes.
			507	+	func (c *ContentCoordinator) onLoadFinished(ctx context.Context, paneID entity.PaneID) {
			508	+	_, wsView := c.getActiveWS()
			509	+	if wsView == nil {
			510	+	return
			511	+	}
			512	+
			513	+	paneView := wsView.GetPaneView(paneID)
			514	+	if paneView != nil {
			515	+	paneView.SetLoading(false)
			516	+	}
			517	+	}
			518	+
			519	+	// onProgressChanged updates the progress bar with current load progress.
			520	+	func (c *ContentCoordinator) onProgressChanged(ctx context.Context, paneID entity.PaneID, progress float64) {
			521	+	_, wsView := c.getActiveWS()
			522	+	if wsView == nil {
			523	+	return
			524	+	}
			525	+
			526	+	paneView := wsView.GetPaneView(paneID)
			527	+	if paneView != nil {
			528	+	paneView.SetLoadProgress(progress)
			529	+	}
			530	+	}

M internal/ui/theme/css.go +28 -3


@@ -46,6 +46,10 @@ func GenerateCSSWithScale(p Palette, scale float64) string {
46	46
47	47		// Stacked pane styling
48	48		sb.WriteString(generateStackedPaneCSS(p))
	49	+	sb.WriteString("\n")
	50	+
	51	+	// Progress bar styling
	52	+	sb.WriteString(generateProgressBarCSS(p))
49	53
50	54		return sb.String()
51	55		}

@@ -200,7 +204,7 @@ entry.omnibox-entry > *:focus-visible {
200	204		border-radius: 0;
201	205		border-left: 0.1875em solid transparent;
202	206		border-bottom: 0.0625em solid alpha(var(--border), 0.5);
203		-	transition: background-color 100ms ease-in-out, border-left-color 100ms ease-in-out;
	207	+	transition: background-color 100ms ease-in-out, border-left 100ms ease-in-out;
204	208		min-height: 2.75em;
205	209		}
206	210

@@ -210,12 +214,12 @@ entry.omnibox-entry > *:focus-visible {
210	214
211	215		.omnibox-row:hover {
212	216		background-color: alpha(var(--accent), 0.12);
213		-	border-left-color: var(--accent);
	217	+	border-left: 0.1875em solid var(--accent);
214	218		}
215	219
216	220		.omnibox-row:selected {
217	221		background-color: alpha(var(--accent), 0.2);
218		-	border-left-color: var(--accent);
	222	+	border-left: 0.1875em solid var(--accent);
219	223		}
220	224
221	225		/* Favicon in omnibox rows */

@@ -378,3 +382,24 @@ button.stacked-pane-title-button:hover .stacked-pane-titlebar label {
378	382		}
379	383		`
380	384		}
	385	+
	386	+	// generateProgressBarCSS creates progress bar styles for page loading indication.
	387	+	func generateProgressBarCSS(p Palette) string {
	388	+	return `/* ===== Progress Bar Styling ===== */
	389	+
	390	+	/* Native GtkProgressBar with osd class */
	391	+	progressbar.osd {
	392	+	min-height: 4px;
	393	+	}
	394	+
	395	+	progressbar.osd trough {
	396	+	min-height: 4px;
	397	+	background-color: alpha(var(--bg), 0.3);
	398	+	}
	399	+
	400	+	progressbar.osd progress {
	401	+	min-height: 4px;
	402	+	background-color: var(--accent);
	403	+	}
	404	+	`
	405	+	}

 	// Stacked pane styling
 	sb.WriteString(generateStackedPaneCSS(p))
+	sb.WriteString("\n")
+	// Progress bar styling
+	sb.WriteString(generateProgressBarCSS(p))
 	return sb.String()
 }
 	border-radius: 0;
 	border-left: 0.1875em solid transparent;
 	border-bottom: 0.0625em solid alpha(var(--border), 0.5);
-	transition: background-color 100ms ease-in-out, border-left-color 100ms ease-in-out;
+	transition: background-color 100ms ease-in-out, border-left 100ms ease-in-out;
 	min-height: 2.75em;
 }
 .omnibox-row:hover {
 	background-color: alpha(var(--accent), 0.12);
-	border-left-color: var(--accent);
+	border-left: 0.1875em solid var(--accent);
 }
 .omnibox-row:selected {
 	background-color: alpha(var(--accent), 0.2);
-	border-left-color: var(--accent);
+	border-left: 0.1875em solid var(--accent);
 }
 /* Favicon in omnibox rows */
 }
 `
 }
+// generateProgressBarCSS creates progress bar styles for page loading indication.
+func generateProgressBarCSS(p Palette) string {
+	return `/* ===== Progress Bar Styling ===== */
+/* Native GtkProgressBar with osd class */
+progressbar.osd {
+	min-height: 4px;
+}
+progressbar.osd trough {
+	min-height: 4px;
+	background-color: alpha(var(--bg), 0.3);
+}
+progressbar.osd progress {
+	min-height: 4px;
+	background-color: var(--accent);
+}
+`
+}