dark mode "flashing" when sorting by duration in light mode

[evgeni]

What is the issue ?

Screencast.from.2024-04-29.18-47-51.webm

What should be happening ?

No flashing.
Doesn't happen in darkmode

[dmsimard]

Hi @evgeni and thanks for another good find.

I don't know the fix for this one yet but it likely resides within how we select and load the light or dark bootstrap theme within theme.js: https://github.com/ansible-community/ara/blob/master/ara/ui/static/js/theme.js

We load the css files:

ara/ara/ui/templates/base.html

Lines 16 to 21 in 8eda9c8

	{% static 'css/bootstrap.min.css' as ara_bootstrap %}
	<link id="bootstrap-css" rel="stylesheet" href="{% static_url ara_bootstrap %}">
	{% static 'css/pygments-dark.css' as ara_pygments_dark %}
	<link id="pygments-dark-css" rel="stylesheet" href="{% static_url ara_pygments_dark %}" disabled>
	{% static 'css/pygments-light.css' as ara_pygments_light %}
	<link id="pygments-light-css" rel="stylesheet" href="{% static_url ara_pygments_light %}">

And then we use theme.js to select the theme here:

ara/ara/ui/templates/base.html

Lines 88 to 89 in 8eda9c8

	{% static 'js/theme.js' as theme_js_url %}
	<script src="{% static_url theme_js_url %}"></script>

[dmsimard]

twbs/bootstrap#37774 suggests that the javascript theme selection should run as early as possible (instead of at the end of the body like we are doing now) and made blocking in order to resolve or mitigate the issue.

I can look into this eventually if no one gets to it first.