Recent replies takes 2 seconds to display

Dev
1

Is there any way to display the latest replies instantly? Currently, I use this code:

  api.onPageChange(() => {
    if (window.location.pathname === "/") {
      const container = document.querySelector(".latest-topic-list");
      if (!container || container.dataset.modified === "true") return;

      fetch("/posts.json?order=created")
        .then(res => res.json())
        .then(data => {
          const replies = data.latest_posts
            .filter(p => p.post_number > 1 && !p.topic_slug.includes("private-message"))
            .slice(0, 15);

          const topicFetches = replies.map(post =>
            fetch(`/t/${post.topic_id}.json`)
              .then(res => res.json())
              .then(topic => {
                return {
                  post,
                  category: topic.category_id ? topic.category_name : null,
                  tags: topic.tags || []
                };
              })
          );

          Promise.all(topicFetches).then(results => {
            const rows = results.map(({ post, category, tags }) => {
              const url = `/t/${post.topic_slug}/${post.topic_id}/${post.post_number}`;
              const avatarUrl = post.avatar_template.replace("{size}", "45");
              const excerpt = post.excerpt?.replace(/<\/?[^>]+(>|$)/g, "")?.slice(0, 120) + (post.excerpt?.length > 120 ? '...' : '') || '';

              const categoryHtml = category
                ? `<span style="font-size: 0.85em; color: #666;">Categoria: <strong>${category}</strong></span><br>`
                : '';

              const tagsHtml = tags.length
                ? `<span style="font-size: 0.85em; color: #666;">Tags: ${tags.map(tag => `<span style="background:#eee; padding:2px 6px; border-radius:3px; margin-right:4px;">${tag}</span>`).join("")}</span>`
                : '';

              return `
                <tr class="topic-list-item">
                  <td class="main-link clearfix">
                    <div style="display: flex; align-items: center; gap: 16px; padding: 8px 0;">
                      <div style="flex-shrink: 0;">
                        <a class="avatar-link" href="/u/${post.username}">
                          <img loading="lazy" width="45" height="45" src="${avatarUrl}" class="avatar" alt="${post.username}">
                        </a>
                      </div>
                      <div style="display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 8px;">
                        <span class="link-top-line" style="margin-bottom: 6px;">
                          <a href="${url}" class="title raw-link">${excerpt}</a>
                        </span>
                        <div class="link-bottom-line">
                          ${categoryHtml}
                          ${tagsHtml}
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              `;
            }).join("");

            // Cria o contêiner da seção de últimos comentários
            const latestRepliesContainer = document.createElement("div");
            latestRepliesContainer.className = "latest-replies-container";
            latestRepliesContainer.style.marginTop = "2em";

            latestRepliesContainer.innerHTML = `
              <table class="topic-list latest-topic-list">
                <thead>
                  <tr>
                    <th class="default">Últimos Comentários</th>
                  </tr>
                </thead>
                <tbody>
                  ${rows}
                </tbody>
              </table>
            `;

            container.parentNode.insertBefore(latestRepliesContainer, container.nextSibling);
            container.dataset.modified = "true";
          });
        })
        .catch(error => {
          console.error("Erro ao buscar últimos comentários:", error);
        });
    }
  });
</script>

but it takes an average of 2 seconds for the content to appear. The same thing happens with the right sidebar blocks with “recent replies”. Is this normal?

1 Like
2

Why are you adding any code?

This works out of the box without anything special; is it broken for you?

2 Likes
3

That’s his issue.

I would say it’s expected because the code makes several API requests.
It retrieves the latest posts and then makes one request per topic ID (15 here) to retrieve the category name.

At the moment, I don’t know if there is another way besides using a plugin and making a custom SQL query, for example.

3 Likes
4

Thats exact.
But the Right Sidebar Blocks make requests too? It gives me the same results for recent replies. Its takes 2 seconds to appear.

I will see how to make a plugin. Thank you

5

Yes, it does the same in retrieving the latest posts, but that’s it. It doesn’t try to get the category name, that’s the difference.

1 Like
6

I understand. Thank you for the help.

I will try to find another solution

1 Like
7

Finally, I am using this for now:

cscript type="text/discourse-plugin" version="0.11.3"
  api.onPageChange(() => {
    if (window.location.pathname === "/") {
      const container = document.querySelector(".latest-topic-list");
      if (!container) return;
      
      // Prevent multiple initializations
      if (window.latestRepliesInitialized) return;
      window.latestRepliesInitialized = true;
      
      // Settings
      const POLLING_INTERVAL = 2000; // 2 seconds
      const COMMENTS_TO_SHOW = 15;
      const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes
      
      // Cache keys
      const CACHE_KEY = "discourse_latest_replies_data";
      const CACHE_TIMESTAMP_KEY = "discourse_latest_replies_timestamp";
      const CACHE_LAST_ID_KEY = "discourse_latest_replies_last_id";
      
      // Store the last seen post ID for comparison
      let lastSeenPostId = parseInt(localStorage.getItem(CACHE_LAST_ID_KEY) || "0");
      let pollingIntervalId = null;
      
      console.log(`Initializing latest comments plugin (last ID in cache: ${lastSeenPostId})`);
      
      // Function to load the latest replies
      function loadLatestReplies(silent = false, forceRefresh = false) {
        // Check cache first, if not a forced update
        if (!forceRefresh) {
          const cachedData = localStorage.getItem(CACHE_KEY);
          const cacheTimestamp = localStorage.getItem(CACHE_TIMESTAMP_KEY);
          const now = Date.now();
          
          // If we have valid cache data
          if (cachedData && cacheTimestamp && now - parseInt(cacheTimestamp) < CACHE_DURATION) {
            try {
              const results = JSON.parse(cachedData);
              console.log(`Using cached data (${results.length} comments, cache from ${Math.round((now - parseInt(cacheTimestamp)) / 1000 / 60)} minutes ago)`);
              renderLatestReplies(results, false);
              
              // If not silent, no need to do more
              if (!silent) {
                return;
              }
              
              // If silent, continue to check for updates
            } catch (e) {
              console.error("Error processing cache:", e);
              // If cache error, continue to fetch fresh data
            }
          } else if (cachedData) {
            console.log("Cache expired, fetching fresh data");
          } else {
            console.log("No cache found, fetching fresh data");
          }
        } else {
          console.log("Forcing update, ignoring cache");
        }
        
        // If it is not silent, show the loading indicator
        if (!silent) {
          // If a comments container already exists, do not show the indicator
          const existingContainer = document.querySelector(".latest-replies-container");
          if (!existingContainer) {
            let loadingIndicator = document.getElementById("latest-replies-loading");
            if (!loadingIndicator) {
              loadingIndicator = document.createElement("div");
              loadingIndicator.id = "latest-replies-loading";
              loadingIndicator.innerHTML = `
                <div style="text-align: center; padding: 20px;">
                  <span class="spinner small"></span>
                  <span style="margin-left: 10px;">Loading recent comments...</span>
                </div>
              `;
              container.parentNode.insertBefore(loadingIndicator, container.nextSibling);
            }
          }
        }
        
        // Fetch the latest data
        fetch("/posts.json?order=created")
          .then(res => res.json())
          .then(data => {
            // Diagnostic log
            if (!silent) {
              console.log("Data received from API:", data.latest_posts.length);
            }
            
            const replies = data.latest_posts
              .filter(p => p.post_number > 1 && !p.topic_slug.includes("private-message"))
              .slice(0, COMMENTS_TO_SHOW);
            
            // Check for new posts
            const maxId = replies.length > 0 ? Math.max(...replies.map(post => post.id)) : 0;
            const hasNewPosts = maxId > lastSeenPostId;
            
            // Diagnostic log
            if (hasNewPosts && !silent) {
              console.log(`New posts detected. Last ID: ${lastSeenPostId}, New max ID: ${maxId}`);
            }
            
            // Update the last seen ID
            if (maxId > lastSeenPostId) {
              lastSeenPostId = maxId;
              localStorage.setItem(CACHE_LAST_ID_KEY, lastSeenPostId.toString());
            }
            
            // If there are no new posts and the check is silent, do nothing
            if (!hasNewPosts && silent && !forceRefresh) {
              return;
     ...
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.