Add loading screen before the comments have been fully loaded

[Miigon]

Is there a way to add a loading icon before the comments (and preferably also the script itself) have been loaded? Currently it just shows nothing, not even a white block, just 0 height nothingness.

My blog site has lots of readers who are from somewhere with slow connectivity to GitHub so loading the comments will take quite some time. I would like them to know that the comment section exists and it's just not fully loaded yet. Currently most of them don't notice the comment section at all because it's completely hidden before comments are loaded, which takes 5~10s sometimes.

I think it would be logical for a loading screen to be a part of utterances. If not, how could I add one myself if I were to do it that way?

[rohchakr]

@Miigon Were you able to add the loading screen? I also have the same requirement.

[rohchakr]

Well, I decided to migrate to giscus which provides a cool loader.

[Miigon]

Well, I decided to migrate to giscus which provides a cool loader.

I also did the same years ago. Giscus is more actively maintained and uses GitHub discussion instead of GitHub issue

[FrostKiwi]

I added a loading spinner to utterances in my blog: https://github.com/FrostKiwi/treasurechest/blob/b890f015873df326c91a11df90b551680e95c32b/_includes/layout.html#L128 for instance on this article: https://blog.frost.kiwi/analytical-anti-aliasing

It boils down to listening globally for a message event from the utterances domain, specifically for resize. The script enables the spinner visibility (to prevent the spinner from showing for browsers with js disabled) and when the utterances event fires, it hides it again. Seems to work great.

const spinner = document.querySelector('.spinner');
spinner.style.display = 'block';
window.addEventListener('message', (event) => {
	if (event.origin.startsWith('https://utteranc.es') && event.data?.type === 'resize') {
		spinner.style.display = 'none';
	}
});

I have already comments with utterances, actually prefer the comments as issues and can't migrate to giscus.

[FrostKiwi]

@Miigon @rohchakr
This is now implemented by this PR: #678