# Embedded site stuck at "Loading Discussions"

**URL:** https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525
**Category:** Support
**Tags:** embedding
**Created:** [December 10, 2024, 6:23am UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525 "2024-12-10T06:23:06Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Edrian\_C\_Bertulfo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edrian_c_bertulfo/32/471966_2.png) [@Edrian\_C\_Bertulfo](https://meta.discourse.org/u/Edrian_C_Bertulfo)
#### Post date: [December 10, 2024, 6:23am UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/1 "2024-12-10T06:23:06Z")

</div>

Hello! I have this issue when trying to embed Discourse to our NextJS Web App. I already tried searching for answers from the already existing thread that touches on the same error, but I haven’t been able to find a resolution for my issue.

Here’s how our embed code looks like:

```plaintext
<script id="discourse" type="text/javascript" data-nscript="afterInteractive">DiscourseEmbed = {
              discourseUrl: 'https://qanvast.discourse.group/',
              discourseEmbedUrl: 'https://web-uat.qanvast.com/sg/interior-design-singapore/forefront-interior-the-alcove-26226?image=769596',
              // className: 'CLASS_NAME',
            };

            (function() {
              var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
              d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
              (document.getElementsByTagName('head')[0] 
              || document.getElementsByTagName('body')[0]).appendChild(d);
            })();</script>

```

In the front-end, it’s just stuck in “Loading Discussions…”. At first I thought it has something to do with the CSP, but I already added the domain to the Embedding Allowlist. No errors show up in the console logs nor the Network calls.

I’ve been stuck at this for a few hours now so I’d appreciate any help.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 10, 2024, 7:47am UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/2 "2024-12-10T07:47:21Z")

</div>

Hi @Edrian_C_Bertulfo welcome 👋

Did you follow this topic? This is how to do it, but I have no idea if it will work for a NexJS web app…

> [@Embed Discourse comments on another website via Javascript](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963):
>
> Discourse has the ability to embed the comments from a topic in a remote site using a Javascript API that creates an IFRAME. For an example of this in action, check out [Coding Horror’s blog](http://blog.codinghorror.com/welcome-to-the-internet-of-compromised-things/#discourse-comments). The blog is run via [Ghost](https://ghost.org/) but the comments are embedded from his [Discourse forum](http://discourse.codinghorror.com/t/welcome-to-the-internet-of-compromised-things/3550). One important thing to note with this setup is that users have to navigate to your forum to post replies. This is intentional, as we feel that the posting interface on a Discourse forum is currently much richer than what we …

---

<div class="post-metadata">

### Author: ![Edrian\_C\_Bertulfo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edrian_c_bertulfo/32/471966_2.png) [@Edrian\_C\_Bertulfo](https://meta.discourse.org/u/Edrian_C_Bertulfo)
#### Post date: [December 11, 2024, 3:29am UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/3 "2024-12-11T03:29:19Z")

</div>

Hello Lilly!

Thank you for your response. I did follow the instructions on that post, and I’m still stuck with the infinite “Loading Discussion…” issue.

---

<div class="post-metadata">

### Author: ![jfrux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jfrux/32/496612_2.png) [@jfrux](https://meta.discourse.org/u/jfrux)
#### Post date: [March 30, 2025, 4:11pm UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/4 "2025-03-30T16:11:27Z")

</div>

Did you ever figure it out?

---

<div class="post-metadata">

### Author: ![Graemef](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/graemef/32/498987_2.png) [@Graemef](https://meta.discourse.org/u/Graemef)
#### Post date: [April 18, 2025, 10:53pm UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/5 "2025-04-18T22:53:19Z")

</div>

I have this issue using next.js too. It is stuck on ‘loading discussion’ for the first load (before topic creaed). If i refresh, the comments/start discussion shows - so it creates the topic fine for me, but doesn’t update the loading state (have to refresh to show updated state with comment box).

It’d be good if there was a callback or something to let you know the topic is created as it’s not ideal to have to refresh the page. I don’t know if that is possible with an iframe

---

<div class="post-metadata">

### Author: ![jfrux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jfrux/32/496612_2.png) [@jfrux](https://meta.discourse.org/u/jfrux)
#### Post date: [April 19, 2025, 7:30pm UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/6 "2025-04-19T19:30:56Z")

</div>

Hmm, it doesn’t actually ever load, even after the topic creates…  
At least not for me.

Any tips?

---

<div class="post-metadata">

### Author: ![Graemef](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/graemef/32/498987_2.png) [@Graemef](https://meta.discourse.org/u/Graemef)
#### Post date: [April 19, 2025, 11:34pm UTC](https://meta.discourse.org/t/embedded-site-stuck-at-loading-discussions/341525/7 "2025-04-19T23:34:56Z")

</div>

Here’s what I have in my next app. It works how I mentioned previously - have to press refresh. Lemme know if it works.

Sometimes i have ot refresh a few times or wait for a while then refresh to get pas tthe ‘loading discussion’ message

```plaintext
<DiscourseComments
          discourseUrl="https://discourseurl.com/"
          discourseEmbedUrl={embedUrl}
          username="system"
        />

```

component:

```plaintext
"use client"

import { useEffect, useRef } from "react"

/**
 * A React component to embed Discourse comments on a website
 *
 * @param {Object} props - Component props
 * @param {string} props.discourseUrl - The URL of your Discourse instance (including trailing slash)
 * @param {string} [props.discourseEmbedUrl] - The URL of the current page (for auto topic creation)
 * @param {number} [props.topicId] - ID of an existing Discourse topic (alternative to discourseEmbedUrl)
 * @param {string} [props.username] - Username for topic creation
 * @param {string} [props.className] - CSS class name to add to the embed
 * @param {string} [props.referrerPolicy] - Referrer policy for the iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Prevent duplicate initialization
    if (initialized.current) return
    initialized.current = true

    // Validate required props
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl is required")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: Either discourseEmbedUrl or topicId must be provided")
      return
    }

    // Configure the Discourse embed
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Set the global DiscourseEmbed object
    window.DiscourseEmbed = config

    // Load the Discourse embed script
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // Cleanup
    return () => {
      document.head.removeChild(script)
      delete window.DiscourseEmbed
    }
  }, [discourseUrl, discourseEmbedUrl, topicId, className, referrerPolicy])

  return (
    <>
      <div id="discourse-comments"></div>
      {username && <meta name="discourse-username" content={username} />}
    </>
  )
}

```