Las respuestas recientes tardan 2 segundos en mostrarse

[David_Ghost]

¿Existe alguna forma de mostrar las últimas respuestas al instante? Actualmente, uso este código:

  api.onPageChange(() =e {
    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 =e res.json())
        .then(data =e {
          const replies = data.latest_posts
            .filter(p =e p.post_number e 1 66 !p.topic_slug.includes("private-message"))
            .slice(0, 15);

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

          Promise.all(topicFetches).then(results =e {
            const rows = results.map(({ post, category, tags }) =e {
              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(/c\/?[^e]+(e|$)/g, "")?.slice(0, 120) + (post.excerpt?.length e 120 ? '...' : '') || '';

              const categoryHtml = category
                ? `cspan style="font-size: 0.85em; color: #666;"eCategoria: cstronge${category}c/strongec/spanecbre`
                : '';

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

              return `
                ctr class="topic-list-item"e
                  ctd class="main-link clearfix"e
                    cdiv style="display: flex; align-items: center; gap: 16px; padding: 8px 0;"e
                      cdiv style="flex-shrink: 0;"e
                        ca class="avatar-link" href="/u/${post.username}"e
                          cimg loading="lazy" width="45" height="45" src="${avatarUrl}" class="avatar" alt="${post.username}"e
                        c/ae
                      c/dive
                      cdiv style="display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 8px;"e
                        cspan class="link-top-line" style="margin-bottom: 6px;"e
                          ca href="${url}" class="title raw-link"e${excerpt}c/ae
                        c/spane
                        cdiv class="link-bottom-line"e
                          ${categoryHtml}
                          ${tagsHtml}
                        c/dive
                      c/dive
                    c/dive
                  c/tde
                ctre
              `;
            }).join("");

            // Crea el contenedor de la sección de últimos comentarios
            const latestRepliesContainer = document.createElement("div");
            latestRepliesContainer.className = "latest-replies-container";
            latestRepliesContainer.style.marginTop = "2em";

            latestRepliesContainer.innerHTML = `
              ctable class="topic-list latest-topic-list"e
                ctheade
                  ctre
                    cth class="default"eÚltimos Comentariose
                  c/tre
                c/theade
                ctbodye
                  ${rows}
                /tbodye
              c/tablee
            `;

            container.parentNode.insertBefore(latestRepliesContainer, container.nextSibling);
            container.dataset.modified = "true";
          });
        })
        .catch(error =e {
          console.error("Error al buscar los últimos comentarios:", error);
        });
    }
  });
c/scriptpero tarda un promedio de 2 segundos en aparecer el contenido. Lo mismo sucede con los bloques de la barra lateral derecha con "respuestas recientes". ¿Es esto normal?

[supermathie (Michael Brown)]

@David_Ghost

Actualmente, uso este código

¿Por qué estás añadiendo algún código?

Esto funciona directamente sin nada especial; ¿te funciona mal?

[Arkshine]

@David_Ghost

pero tarda una media de 2 segundos en aparecer el contenido.

Ese es su problema.

Yo diría que es esperado porque el código realiza varias solicitudes a la API.
Recupera las últimas publicaciones y luego realiza una solicitud por ID de tema (15 aquí) para recuperar el nombre de la categoría.

Por el momento, no sé si hay otra forma además de usar un plugin y hacer una consulta SQL personalizada, por ejemplo.

[David_Ghost]

Exacto.
Pero los Bloques de Barra Lateral Derecha ¿también hacen solicitudes? Me da los mismos resultados para las respuestas recientes. Tarda 2 segundos en aparecer.

Veré cómo hacer un plugin. Gracias.

[Arkshine]

Sí, hace lo mismo al recuperar las últimas publicaciones, pero eso es todo. No intenta obtener el nombre de la categoría, esa es la diferencia.

[David_Ghost]

Entiendo. Gracias por la ayuda.

Intentaré encontrar otra solución

[David_Ghost]

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;
     ...