Disable Loading Comments indicator or style it?

[deadcoder0904]

I got Giscus working smoothly. It uses a hook & a component to load comments.

useGiscus.ts

import React from 'react'
import { useTheme } from 'next-themes'

import { siteMetadata } from '@/_data/index'

import type { IGiscusProps } from '@/types/giscus'

interface IGiscus {
	mapping: IGiscusProps['mapping']
	commentNodeId: string
}

const config = siteMetadata.comment.giscusConfig
const THEME_MAPPING = {
	light: config.theme,
	dark: config.darkTheme,
}
// username/repo format
const REPO_NAME = config.repo as string
const REPO_ID = config.repositoryId as string
const CATEGORY = config.category as string
const CATEGORY_ID = config.categoryId as string
const REACTIONS = config.reactions
const METADATA = config.metadata

export const useGiscus = ({ mapping, commentNodeId }: IGiscus) => {
	const { resolvedTheme = 'light' } = useTheme()
	const theme = React.useRef(resolvedTheme)

	React.useEffect(() => {
		const scriptParentNode = document.getElementById(commentNodeId)
		if (!scriptParentNode) return

		const script = document.createElement('script')
		const attributes = {
			src: 'https://giscus.app/client.js',
			'data-repo': REPO_NAME,
			'data-repo-id': REPO_ID,
			'data-category': CATEGORY,
			'data-category-id': CATEGORY_ID,
			'data-mapping': mapping,
			'data-reactions-enabled': REACTIONS,
			'data-emit-metadata': METADATA,
			'data-theme': THEME_MAPPING[theme.current as keyof typeof THEME_MAPPING],
			crossorigin: 'anonymous',
			async: '',
		}

		Object.entries(attributes).forEach(([name, value]) => script.setAttribute(name, value))

		scriptParentNode.appendChild(script)
	}, [commentNodeId, mapping])

	React.useEffect(() => {
		const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame')
		iframe?.contentWindow?.postMessage(
			{
				giscus: {
					setConfig: {
						theme: THEME_MAPPING[resolvedTheme as keyof typeof THEME_MAPPING],
					},
				},
			},
			'https://giscus.app'
		)
	}, [resolvedTheme])
}

Giscus.tsx

import React from 'react'
import { useInView } from 'react-intersection-observer'

import { useGiscus } from '@/hooks/useGiscus'

import type { IGiscusProps } from '@/types/giscus'

interface IGiscus {
	mapping: IGiscusProps['mapping']
}

export const Giscus = ({ mapping }: IGiscus) => {
	const COMMENTS_NODE_ID = 'comments'
	const { ref, inView } = useInView({ threshold: 0, triggerOnce: true })

	useGiscus({ mapping, commentNodeId: inView ? COMMENTS_NODE_ID : '' })

	return (
		<div ref={ref} className="min-h-[400px]">
			{inView ? <div id={COMMENTS_NODE_ID} /> : null}
		</div>
	)
}

However, I want a way to style Loading comments indicator that shows up as soon as I try scrolling to the comment section.

As you can see in my code, there is no Loading comments section so I assume it is from Giscus itself.

The color is first black or gray & then changes to white as I'm using dark mode but I would really like a way to style it so it shows in the center with a little padding/margin or completely remove it just like it is in Utterances.

How do I do it?

[laymonage]

You can style it by using a custom theme and styling the gsc-comments-count class. Note that as the name suggests, it also applies to the comments count.

https://github.com/laymonage/giscus/blob/d393598971cbd97143bcc433f3865ddbfa0989e1/components/Giscus.tsx#L92-L99

[deadcoder0904]

Just to be clear, if I style gsc-comments-count like:

// style loading comments indicator in giscus
.gsc-comments-count {
	@apply text-gray-900 dark:text-white mt-10;
}

Would it work without having to create a Custom Theme? Because I just want to style the .gsc-comments.count, everything else is perfect.

I mean I tried doing this but it still doesn't show any difference. I even added it to my safelist:

module.exports = {
	mode: 'jit',
	purge: {
		safelist: ['gsc-comments-count'],
	}
}

[laymonage]

Unfortunately, no, it doesn't work because the comments are loaded within an <iframe>. Your CSS only applies to your website, so you'll need to use a custom theme. You can copy giscus' themes e.g. https://giscus.app/themes/light.css and add your modifications.

[deadcoder0904]

@laymonage If it accepts a className prop, can it work or will the same thing happen?

I mean like className={className + "gsc-comments-count restOfTheClasses"}

You can copy giscus' themes

I'd rather keep it as it then rather than the hassle of maintaining my own thing for a small issue. Would love to know if you can fix it on your end by setting dark mode?

[laymonage]

If it accepts a className prop, can it work or will the same thing happen?

No, that won't do anything. Styles on your site are never loaded inside cross-origin <iframe>s. Changing anything won't "fix" it, that's the way <iframe>s work.

Would love to know if you can fix it on your end by setting dark mode?

It's tricky because the way the CSS is loaded kind of "breaks" out of how Next.js usually works with CSS, in order to support changing themes dynamically. The correct theme isn't loaded until after a while. I'll try to look into it again.

I guess I can try to remove the "Loading comments..." , but I have to think about it.

[laymonage]

@deadcoder0904 I tried to prevent the theme flashing on initial load in #155, which seems to have fixed this.

[deadcoder0904]

@laymonage it worked haha, tysm you're fast :)