common/anim.gd

@@ -24,15 +24,20 @@ static func enabled() -> bool:
 ## one with the same key so they don't fight. Returns null when animations are off or the
 ## node is not in the tree.
 static func tween(node: Node, key: StringName = &"anim") -> Tween:
+	stop(node, key)
+	if !enabled() || !node.is_inside_tree():
+		return null
+	var new_tween: Tween = node.create_tween()
+	node.set_meta(StringName("_tween_" + key), new_tween)
+	return new_tween
+
+
+## Stops the animation called [param key] on [param node], if one is running.
+static func stop(node: Node, key: StringName = &"anim") -> void:
 	var meta: StringName = StringName("_tween_" + key)
 	var old: Variant = node.get_meta(meta) if node.has_meta(meta) else null
 	if old is Tween && (old as Tween).is_valid():
 		(old as Tween).kill()
-	if !enabled() || !node.is_inside_tree():
-		return null
-	var new_tween: Tween = node.create_tween()
-	node.set_meta(meta, new_tween)
-	return new_tween
 
 
 ## Makes [param control] grow from its middle.

common/animated_progress_bar.gd

@@ -0,0 +1,118 @@
+class_name AnimatedProgressBar
+extends ProgressBar
+## A progress bar with some life in it:
+## - [method wait] shows Godot's busy animation until there is any progress;
+## - [method move_to] glides to each new value instead of jumping;
+## - a soft highlight sweeps along the filled part, kept inside its rounded corners.
+##
+## The bar's style, e.g. [code]SyncProgressBar[/code], has a [code]shine[/code] colour for
+## the highlight, and two more styles go with it: [code]<style>Fill[/code], a Panel shaped
+## like the filled part that the highlight is kept inside, and [code]<style>Text[/code],
+## the Label with the percentage. With Reduce animations the bar only jumps to its values,
+## with no busy animation or highlight.
+
+## How wide the highlight is, in pixels.
+const SHINE_WIDTH: float = 260.0
+## How fast the highlight moves, in pixels per second.
+const SHINE_SPEED: float = 520.0
+## How far past the end the highlight goes before starting over, so sweeps have a pause.
+const SHINE_GAP: float = 600.0
+
+# The filled part's shape, which only its children are drawn inside
+var _mask: Panel
+var _shine: TextureRect
+# The percentage, drawn above the highlight rather than under it
+var _label: Label
+var _shine_x: float = -SHINE_WIDTH
+
+
+func _ready() -> void:
+	_mask = Panel.new()
+	_mask.mouse_filter = Control.MOUSE_FILTER_IGNORE
+	_mask.clip_children = CanvasItem.CLIP_CHILDREN_ONLY
+	add_child(_mask)
+	_shine = TextureRect.new()
+	_shine.mouse_filter = Control.MOUSE_FILTER_IGNORE
+	_shine.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
+	_shine.stretch_mode = TextureRect.STRETCH_SCALE
+	_mask.add_child(_shine)
+	_label = Label.new()
+	_label.mouse_filter = Control.MOUSE_FILTER_IGNORE
+	_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
+	_label.vertical_alignment = VERTICAL_ALIGNMENT_CENTER
+	_label.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
+	_label.visible = show_percentage
+	add_child(_label)
+	show_percentage = false
+	_mask.theme_type_variation = StringName(String(theme_type_variation) + "Fill")
+	_label.theme_type_variation = StringName(String(theme_type_variation) + "Text")
+	theme_changed.connect(_update_style)
+	value_changed.connect(func(_value: float) -> void: _update_label())
+	_update_style()
+	_update_label()
+
+
+func _process(delta: float) -> void:
+	var fill_width: float = fill_width()
+	_mask.size = Vector2(fill_width, size.y)
+	_mask.visible = fill_width > 0.0 && !indeterminate && Anim.enabled()
+	if !_mask.visible:
+		return
+	_shine_x += SHINE_SPEED * delta
+	if _shine_x > fill_width + SHINE_GAP:
+		_shine_x = -SHINE_WIDTH
+	_shine.position = Vector2(_shine_x, 0.0)
+	_shine.size = Vector2(SHINE_WIDTH, size.y)
+
+
+## Shows the busy animation, with no value, until [method move_to] has some progress.
+func wait() -> void:
+	Anim.stop(self, &"progress")
+	value = min_value
+	indeterminate = Anim.enabled()
+	_update_label()
+
+
+## Glides to [param target]. Any progress ends the busy animation.
+func move_to(target: float) -> void:
+	if target > min_value:
+		indeterminate = false
+	var glide: Tween = Anim.tween(self, &"progress")
+	if glide == null:
+		value = target
+		return
+	glide.tween_property(self, "value", target, Anim.SLOW) \
+			.set_trans(Tween.TRANS_QUAD).set_ease(Tween.EASE_OUT)
+
+
+## How wide the filled part is, the way [ProgressBar] draws it.
+func fill_width() -> float:
+	var margins: float = get_theme_stylebox(&"fill").get_minimum_size().x
+	var filled: float = roundf(ratio_done() * (size.x - margins))
+	return filled + margins if filled > 0.0 else 0.0
+
+
+func _update_style() -> void:
+	var shine: Color = get_theme_color(&"shine")
+	var clear: Color = shine
+	clear.a = 0.0
+	var gradient: Gradient = Gradient.new()
+	gradient.offsets = PackedFloat32Array([0.0, 0.5, 1.0])
+	gradient.colors = PackedColorArray([clear, shine, clear])
+	var texture: GradientTexture2D = GradientTexture2D.new()
+	texture.gradient = gradient
+	texture.width = 256
+	texture.height = 1
+	_shine.texture = texture
+
+
+func _update_label() -> void:
+	if _label == null:
+		return
+	_label.text = "" if indeterminate else "%d%%" % roundi(ratio_done() * 100.0)
+
+
+## How much is done, from 0 to 1.
+func ratio_done() -> float:
+	var span: float = max_value - min_value
+	return clampf((value - min_value) / span, 0.0, 1.0) if span > 0.0 else 0.0

common/animated_progress_bar.gd.uid

@@ -0,0 +1 @@
+uid://bxjx3kacfqg6j

popups/SyncPopup.tscn

@@ -1,6 +1,7 @@
 [gd_scene format=3 uid="uid://dpdem7pdxweb5"]
 
 [ext_resource type="Script" uid="uid://c3ejukwth512a" path="res://popups/sync_popup.gd" id="1_8ba47"]
+[ext_resource type="Script" path="res://common/animated_progress_bar.gd" id="progress_bar_script"]
 
 [node name="SyncPopup" type="Control" unique_id=1302914356 node_paths=PackedStringArray("panel")]
 layout_mode = 3
@@ -62,11 +63,11 @@ layout_mode = 2
 
 [node name="SyncProgressBar" type="ProgressBar" parent="SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer" unique_id=719135231]
 unique_name_in_owner = true
-custom_minimum_size = Vector2(1300, 0)
+custom_minimum_size = Vector2(1300, 32)
 layout_mode = 2
 size_flags_horizontal = 6
-step = 1.0
+theme_type_variation = &"SyncProgressBar"
-rounded = true
+script = ExtResource("progress_bar_script")
 
 [node name="SyncHBoxContainer" type="HBoxContainer" parent="SyncPanel/ScrollContainer/SyncVBoxContainer" unique_id=1156646398]
 unique_name_in_owner = true

popups/sync_popup.gd

@@ -17,7 +17,7 @@ var has_synced: bool = false
 @onready var no_changes_label: Label = %NoChangesLabel
 @onready var progress_hbox: HBoxContainer = %ProgressHBoxContainer
 @onready var sync_hbox: HBoxContainer = %SyncHBoxContainer
-@onready var sync_progress_bar: ProgressBar = %SyncProgressBar
+@onready var sync_progress_bar: AnimatedProgressBar = %SyncProgressBar
 @onready var soundtracks_added_vbox: VBoxContainer = %SoundtracksAddedVBox
 @onready var soundtracks_added_separator: VSeparator = %SoundtracksAddedSeparator
 @onready var soundtracks_readded_vbox: VBoxContainer = %SoundtracksReAddedVBox
@@ -77,13 +77,24 @@ func _on_sync_timeout() -> void:
 		GameLog.debug("data_received: ", data_received)
 		if data_received != null:
 			if data_received.has("progress"):
-				sync_progress_bar.value = int(data_received.progress)
+				sync_progress_bar.move_to(int(data_received.progress))
 				sync_time.text = data_received.time_spent if data_received.has("time_spent") else ""
 			else:
-				on_sync_finished(data_received)
+				_finish_progress(data_received)
 	MusicServerClient.fetch_sync_progress(get_progress)
 
 
+# Fills the bar and lets it pop before the result takes its place
+func _finish_progress(data_received: Dictionary) -> void:
+	sync_timer.stop()
+	if Anim.enabled() && progress_hbox.visible:
+		sync_progress_bar.move_to(sync_progress_bar.max_value)
+		await get_tree().create_timer(Anim.SLOW).timeout
+		Anim.pop(sync_progress_bar, 1.04, Anim.SLOW)
+		await get_tree().create_timer(Anim.SLOW).timeout
+	on_sync_finished(data_received)
+
+
 func on_sync_finished(data_received: Dictionary) -> void:
 	has_synced = true
 	reset_sync_result()
@@ -218,6 +229,7 @@ func show_sync_result() -> void:
 func show_sync_progress() -> void:
 	sync_title_label.text = "Sync in Progress"
 	progress_hbox.visible = true
+	sync_progress_bar.wait()
 	no_changes_label.visible = false
 	sync_hbox.visible = false
 	caught_errors_vbox.visible = false

server/generated/progress_response.gd

@@ -5,6 +5,7 @@ extends RefCounted
 ## The [code]ProgressResponse[/code] schema of the MusicServer API.
 
 var progress: String
+## How long the sync has been running, as minutes and seconds, e.g. "02:15"
 var time_spent: String
 
 

server/generated/sync_response.gd

@@ -10,6 +10,7 @@ var soundtracks_changed_content: Array[String]
 var soundtracks_changed_title: Dictionary[String, String]
 var soundtracks_re_added: Array[String]
 var soundtracks_removed: Array[String]
+## How long the sync took, as minutes and seconds, e.g. "02:15"
 var total_time: String
 
 

tests/data/layout_baseline.json

@@ -3965,7 +3965,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -3974,7 +3974,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -11977,7 +12004,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -11986,7 +12013,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -16983,7 +17037,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -16992,7 +17046,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -21854,7 +21935,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -21863,7 +21944,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -27246,7 +27354,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -27255,7 +27363,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -33456,7 +33591,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -33465,7 +33600,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -50019,7 +50181,7 @@
     230.0,
     228.0,
     1460.0,
-    109.0
+    114.0
    ],
    "visible": false
   },
@@ -50055,7 +50217,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -50064,7 +50226,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    522.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -50696,7 +50885,7 @@
     230.0,
     228.0,
     1460.0,
-    109.0
+    114.0
    ],
    "visible": true
   },
@@ -50732,7 +50921,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": true
   },
@@ -50741,7 +50930,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": true
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    522.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": true
   },
@@ -50986,7 +51202,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -50995,7 +51211,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -55524,7 +55767,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -55533,7 +55776,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },

tests/fakes/ui_tour.gd

@@ -18,7 +18,7 @@ const SONG_INFO: Dictionary = {
 	"SongNo": 0, "Soundtrack": "Chrono Trigger", "SoundtrackUuid": "soundtrack-0",
 	"Song": "Corridors of Time",
 }
-const SYNC_PROGRESS: Dictionary = {"progress": 40, "time_spent": "00:00:02"}
+const SYNC_PROGRESS: Dictionary = {"progress": 40, "time_spent": "00:02"}
 const SYNC_RESULT: Dictionary = {
 	"soundtracks_added": ["Terranigma", "Lufia II"],
 	"soundtracks_re_added": [],
@@ -26,7 +26,7 @@ const SYNC_RESULT: Dictionary = {
 	"soundtracks_changed_content": ["Chrono Trigger"],
 	"soundtracks_removed": ["Old Soundtrack"],
 	"catched_errors": [],
-	"total_time": "00:00:03",
+	"total_time": "00:03",
 }
 
 ## The server's version history, newest first.

tests/integration/test_scene_split.gd

@@ -226,7 +226,7 @@ func test_click_on_top_bar_while_quiz_popup_is_open_only_closes_it() -> void:
 
 func test_sync_disables_quiz_buttons_until_finished() -> void:
 	_server.respond_bytes("/sync", PackedByteArray())
-	_server.respond_json("/sync/progress", {"progress": 10, "time_spent": "00:00:01"})
+	_server.respond_json("/sync/progress", {"progress": 10, "time_spent": "00:01"})
 	var sync_popup: BasePopup = _window.get_node("SyncPopup")
 
 	_top_bar_button("SyncButton").pressed.emit()

tests/integration/test_sync_popup.gd

@@ -10,6 +10,8 @@ var _window: Control
 func before_test() -> void:
 	_snapshot = AutoloadSnapshot.take([Settings])
 	Settings.currently_syncing = false
+	# The bar jumps to its values and the result shows at once
+	Settings.reduce_animations = true
 	_server = FakeHttpTransport.new().install()
 	_server.respond_bytes("/sync", PackedByteArray())
 	_runner = scene_runner("res://popups/SyncPopup.tscn")
@@ -38,7 +40,7 @@ func _empty_result() -> Dictionary:
 		"soundtracks_changed_content": [],
 		"soundtracks_removed": [],
 		"catched_errors": [],
-		"total_time": "00:00:03",
+		"total_time": "00:03",
 	}
 
 
@@ -64,12 +66,29 @@ func test_start_sync_does_nothing_while_already_syncing() -> void:
 
 func test_progress_updates_progress_bar() -> void:
 	_runner.invoke("start_sync")
-	_server.respond_json("/sync/progress", {"progress": "42", "time_spent": "00:00:12"})
+	_server.respond_json("/sync/progress", {"progress": "42", "time_spent": "00:12"})
 
 	_runner.invoke("_on_sync_timeout")
 
 	assert_float(_node("SyncProgressBar").value).is_equal(42.0)
-	assert_str(_node("SyncTime").text).is_equal("00:00:12")
+	assert_str(_node("SyncTime").text).is_equal("00:12")
+
+
+func test_finished_sync_fills_the_bar_before_the_result() -> void:
+	Settings.reduce_animations = false
+	_runner.invoke("start_sync")
+	var bar: AnimatedProgressBar = _node("SyncProgressBar")
+	assert_bool(bar.indeterminate).is_true()
+
+	_finish_sync(_empty_result())
+
+	assert_bool(_node("ProgressHBoxContainer").visible).is_true()
+	await await_millis(int(Anim.SLOW * 1000) + 100)
+	assert_float(bar.value).is_equal(100.0)
+	assert_bool(_node("ProgressHBoxContainer").visible).is_true()
+	await await_millis(int(Anim.SLOW * 1000) + 100)
+	assert_bool(_node("ProgressHBoxContainer").visible).is_false()
+	assert_str(_node("SyncTitleLabel").text).is_equal("Sync Result")
 
 
 func test_finished_sync_shows_only_sections_with_changes() -> void:
@@ -88,7 +107,7 @@ func test_finished_sync_shows_only_sections_with_changes() -> void:
 	assert_bool(_node("NoChangesLabel").visible).is_false()
 	# Header plus one label per soundtrack
 	assert_int(_node("SoundtracksAddedVBox").get_child_count()).is_equal(3)
-	assert_str(_node("SyncTime").text).is_equal("Total time: 00:00:03")
+	assert_str(_node("SyncTime").text).is_equal("Total time: 00:03")
 	assert_bool(Settings.currently_syncing).is_false()
 	await assert_signal(_window).is_emitted("sync_finished")
 

tests/integration/test_theme.gd

@@ -48,6 +48,9 @@ const STYLES: Dictionary = {
 	"PlayerTime": "Label",
 	"PlayerIcon": "Button",
 	"UpdateButton": "Button",
+	"SyncProgressBar": "ProgressBar",
+	"SyncProgressBarFill": "Panel",
+	"SyncProgressBarText": "Label",
 	"ProgressSlider": "HSlider",
 	"VolumeBar": "HSlider",
 	"StatisticsCard": "PanelContainer",
@@ -67,6 +70,7 @@ const STYLES: Dictionary = {
 ## Theme types that only scripts read from, so they are not styles a node can pick.
 const CODE_ONLY_TYPES: Dictionary = {
 	"Palette": ["backdrop", "first_point", "match_point", "flash"],
+	"SyncProgressBar": ["shine"],
 	"ScoreGraph": [
 		"player_1", "player_2", "player_3", "player_4", "player_5", "player_6", "player_7",
 		"grid", "axis_text", "winning_line",

tests/unit/test_animated_progress_bar.gd

@@ -0,0 +1,88 @@
+extends GdUnitTestSuite
+## The sync popup's progress bar: busy until there is progress, gliding to new values,
+## a highlight on the filled part, and plain jumps with Reduce animations.
+
+var _runner: GdUnitSceneRunner
+var _bar: AnimatedProgressBar
+var _reduce_before: bool
+
+
+func before_test() -> void:
+	_reduce_before = Settings.reduce_animations
+	Settings.reduce_animations = false
+	var holder: Control = auto_free(Control.new())
+	holder.size = Vector2(1000, 100)
+	_bar = AnimatedProgressBar.new()
+	_bar.theme_type_variation = &"SyncProgressBar"
+	_bar.size = Vector2(1000, 32)
+	holder.add_child(_bar)
+	_runner = scene_runner(holder)
+	await _runner.simulate_frames(1)
+
+
+func after_test() -> void:
+	Settings.reduce_animations = _reduce_before
+
+
+func _label() -> Label:
+	return _bar.get_child(1) as Label
+
+
+func test_waits_with_the_busy_animation() -> void:
+	_bar.wait()
+
+	assert_bool(_bar.indeterminate).is_true()
+	assert_str(_label().text).is_empty()
+
+
+func test_progress_ends_the_wait_and_glides() -> void:
+	_bar.wait()
+
+	_bar.move_to(40)
+
+	assert_bool(_bar.indeterminate).is_false()
+	assert_float(_bar.value).is_less(40.0)
+	await await_millis(int(Anim.SLOW * 1000) + 150)
+	assert_float(_bar.value).is_equal(40.0)
+	assert_str(_label().text).is_equal("40%")
+
+
+func test_reduce_animations_jumps_and_never_waits() -> void:
+	Settings.reduce_animations = true
+
+	_bar.wait()
+	assert_bool(_bar.indeterminate).is_false()
+	_bar.move_to(75)
+
+	assert_float(_bar.value).is_equal(75.0)
+	assert_str(_label().text).is_equal("75%")
+
+
+func test_highlight_stays_on_the_filled_part() -> void:
+	Settings.reduce_animations = true
+	_bar.move_to(50)
+	Settings.reduce_animations = false
+	await _runner.simulate_frames(3)
+
+	var mask: Control = _bar.get_child(0)
+	assert_bool(mask.visible).is_true()
+	assert_float(mask.size.x).is_equal(_bar.fill_width())
+	assert_float(_bar.fill_width()).is_between(490.0, 510.0)
+
+
+func test_no_highlight_without_progress_or_animations() -> void:
+	await _runner.simulate_frames(2)
+	assert_bool((_bar.get_child(0) as Control).visible).is_false()
+
+	Settings.reduce_animations = true
+	_bar.move_to(50)
+	await _runner.simulate_frames(2)
+	assert_bool((_bar.get_child(0) as Control).visible).is_false()
+
+
+func test_highlight_takes_the_themes_colour() -> void:
+	var shine: TextureRect = _bar.get_child(0).get_child(0)
+	var gradient: Gradient = (shine.texture as GradientTexture2D).gradient
+
+	assert_object(gradient.get_color(1)).is_equal(_bar.get_theme_color(&"shine"))
+	assert_float(gradient.get_color(0).a).is_equal(0.0)

tests/unit/test_animated_progress_bar.gd.uid

@@ -0,0 +1 @@
+uid://bgb6no4urwpc7

tests/unit/test_api_types.gd

@@ -118,7 +118,7 @@ func test_sync_response() -> void:
 		"soundtracks_added": ["Terranigma"], "soundtracks_re_added": [],
 		"soundtracks_changed_title": {"FF6": "Final Fantasy VI"},
 		"soundtracks_changed_content": ["Chrono Trigger"], "soundtracks_removed": ["Old"],
-		"catched_errors": ["Could not read x.mp3"], "total_time": "00:00:03"}"""))
+		"catched_errors": ["Could not read x.mp3"], "total_time": "00:03"}"""))
 
 	assert_array(result.soundtracks_added).contains_exactly(["Terranigma"])
 	assert_array(result.soundtracks_re_added).is_empty()
@@ -126,15 +126,15 @@ func test_sync_response() -> void:
 	assert_array(result.soundtracks_changed_content).contains_exactly(["Chrono Trigger"])
 	assert_array(result.soundtracks_removed).contains_exactly(["Old"])
 	assert_array(result.catched_errors).contains_exactly(["Could not read x.mp3"])
-	assert_str(result.total_time).is_equal("00:00:03")
+	assert_str(result.total_time).is_equal("00:03")
 
 
 func test_progress_response() -> void:
 	var progress: ProgressResponse = ProgressResponse.from_dict(_parse("""{
-		"progress": "40", "time_spent": "00:00:02"}"""))
+		"progress": "40", "time_spent": "00:02"}"""))
 
 	assert_str(progress.progress).is_equal("40")
-	assert_str(progress.time_spent).is_equal("00:00:02")
+	assert_str(progress.time_spent).is_equal("00:02")
 
 
 func test_version_data() -> void:

themes/christmas_theme.tres

@@ -1248,6 +1248,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.478, 0.082, 0.125, 0.7)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.204, 0.553, 0.290, 1.0)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(0.478, 0.082, 0.125, 1.0)
@@ -1456,6 +1480,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBar/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBar/colors/shine = Color(0.949, 0.843, 0.478, 0.9)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBarText/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.965, 0.925, 0.878, 1.0)
 ScoreGraph/colors/grid = Color(0.992, 0.980, 0.953, 0.1)
 ScoreGraph/colors/player_1 = Color(0.992, 0.980, 0.953, 1.0)

themes/main_theme.tres

@@ -1056,6 +1056,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.1, 0.1, 0.1, 0.55)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(1, 0.5, 0, 1)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(0.875, 0.875, 0.875, 1)
@@ -1264,6 +1288,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBar/colors/font_outline_color = Color(0, 0, 0, 0.55)
+SyncProgressBar/colors/shine = Color(1, 0.86, 0.6, 0.8)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBarText/colors/font_outline_color = Color(0, 0, 0, 0.55)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.75, 0.75, 0.75, 1)
 ScoreGraph/colors/grid = Color(1, 1, 1, 0.1)
 ScoreGraph/colors/player_1 = Color(0.25, 0.56, 0.95, 1)

themes/nord_theme.tres

@@ -1231,6 +1231,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.118, 0.290, 0.412, 0.7)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.533, 0.753, 0.816, 1.0)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(0.925, 0.937, 0.957, 1.0)
@@ -1439,6 +1463,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(0.925, 0.937, 0.957, 1.0)
+SyncProgressBar/colors/font_outline_color = Color(0.180, 0.204, 0.251, 0.8)
+SyncProgressBar/colors/shine = Color(0.925, 0.937, 0.957, 0.85)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(0.925, 0.937, 0.957, 1.0)
+SyncProgressBarText/colors/font_outline_color = Color(0.180, 0.204, 0.251, 0.8)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.847, 0.871, 0.914, 1.0)
 ScoreGraph/colors/grid = Color(0.925, 0.937, 0.957, 0.1)
 ScoreGraph/colors/player_1 = Color(0.533, 0.753, 0.816, 1.0)

themes/original_web_theme.tres

@@ -1157,6 +1157,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.86, 0.86, 0.86, 1)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(1, 0.612, 0, 1)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(1, 0.612, 0, 1)
@@ -1365,6 +1389,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBar/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBar/colors/shine = Color(1, 1, 1, 0.7)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBarText/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.75, 0.75, 0.75, 1)
 ScoreGraph/colors/grid = Color(1, 1, 1, 0.1)
 ScoreGraph/colors/player_1 = Color(0.25, 0.56, 0.95, 1)