[Eco Mode] High CPU usage while train station is selected

[yne]

While using the Eco Mode, the map rendering only use 14%, which is very nice !

However, when a train is selected and the bottom train-panel shows up, the CPU usage goes (and stay) at 60%.

The issue seems to be related to this glowing animation on the station "circle" :

mini-tokyo-3d/src/train-panel.js

Lines 99 to 117 in 1866fb4

	const repeat = () => {
	const {height} = bodyElement.getBoundingClientRect(),
	{timetableIndex: index} = train,
	curr = timetableOffsets[index],
	next = train.arrivalStation ? timetableOffsets[index + 1] : curr,
	y = lerp(curr, next, train._t),
	p = performance.now() % 1500 / 1500;
	container.querySelector('#train-mark').innerHTML =
	`<circle cx="22" cy="${y + 10}" r="${7 + p * 15}" fill="#ffffff" opacity="${1 - p}" />` +
	`<circle cx="22" cy="${y + 10}" r="7" fill="#ffffff" />`;
	if (scrollTop === undefined || scrollTop === bodyElement.scrollTop) {
	bodyElement.scrollTop = Math.round(y - height / 2 + 4);
	scrollTop = bodyElement.scrollTop;
	}
	if (me._container) {
	requestAnimationFrame(repeat);
	}
	};

This animation querySelect and update the existing "circle" with a new SVG element on every frame.

Possible solutions:

• Slow down the animation according to the "Eco Mode" instead of every requestAnimationFrame
• Replace the animation with a more "static" design (for example a colored outline)
• Use a CSS animation: glow 2s steps(2) infinite; with a GPU-friendly attribute (opacity, translate3d ...)

If you don't have time, I can Pull Request you a fix.

PS: They are others animations, that are redrawn 60 times / sec (but they are less CPU intensive, so it's okay)