docs: document loading placeholder support in remark42 div

site/src/docs/configuration/frontend/index.md

@@ -66,6 +66,12 @@ Add following snippet in the place where you want to see Remark42 widget. The co
 **Note:** The initialization script should be placed after the code mentioned above.
 :::
 
+You can place any placeholder content inside the `remark42` div — it will be automatically removed once the comments widget has loaded. This is useful for showing a loading indicator or message while the widget initialises:
+
+```html
+<div id="remark42">Comments loading...</div>
+```
+
 If you want to set this up on a Single Page App, see the [appropriate doc page](https://remark42.com/docs/configuration/frontend/spa/).
 
 #### Themes

site/src/docs/getting-started/installation/index.md

@@ -114,10 +114,10 @@ After that place the code snippet right after config.
 Put the next code snippet on a page of your site where you want to have comments:
 
 ```html
-<div id="remark42"></div>
+<div id="remark42">Comments loading...</div>
 ```
 
-After that widget will be rendered inside this node.
+After that widget will be rendered inside this node. Any content you place inside the div (such as "Comments loading..." above) is automatically removed once the widget initialises, so you can use it as a loading placeholder.
 
 For more information about frontend configuration please [learn about other parameters here](https://remark42.com/docs/configuration/frontend/)
 If you want to set this up on a Single Page App, see the [appropriate doc page](https://remark42.com/docs/configuration/frontend/spa/).

site/src/docs/manuals/integration-with-astro/index.md

@@ -40,7 +40,7 @@ While Astro supports numerous front-end framework [integrations](https://docs.as
   </script>
 </svelte:head>
 
-<div id="remark42" />
+<div id="remark42">Comments loading...</div>
 ```
 
 ### Astro Layout (Page)
@@ -231,8 +231,9 @@ export function Comments() {
 			<p>
 				There are <span className="remark42__counter"></span> comments.
 			</p>
-			{/* The div where Remark42 will embed the comments. */}
-			<div id="remark42"></div>
+			{/* The div where Remark42 will embed the comments.
+			    Any content inside is automatically removed once the widget loads. */}
+			<div id="remark42">Comments loading...</div>
 		</>
 	)
 }

site/src/docs/manuals/integration-with-gatsby/index.md

@@ -87,8 +87,9 @@ const Comments = ({ location }) => {
 	return (
 		<>
 			<h2>Comments</h2>
-			{/* This div is the target for actual comments insertion */}
-			<div id="remark42"></div>
+			{/* This div is the target for actual comments insertion.
+			    Any content inside is automatically removed once the widget loads. */}
+			<div id="remark42">Comments loading...</div>
 		</>
 	)
 }
@@ -194,8 +195,9 @@ export function Comments({ location }: CommentsProps) {
 	return (
 		<Fragment>
 			<h2>Comments</h2>
-			{/* This div is the target for actual comments insertion */}
-			<div id="remark42" />
+			{/* This div is the target for actual comments insertion.
+			    Any content inside is automatically removed once the widget loads. */}
+			<div id="remark42">Comments loading...</div>
 		</Fragment>
 	)
 }