Les réponses récentes prennent 2 secondes pour s'afficher

Dev
1

Y a-t-il un moyen d’afficher instantanément les dernières réponses ? Actuellement, j’utilise ce 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 e 120 ? '...' : '') || '';

              const categoryHtml = category
                ? `span style="font-size: 0.85em; color: #666;"Catégorie : strong${category}/strong/spanbr`
                : '';

              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("");

            // Crée le conteneur de la section des derniers commentaires
            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"Derniers Commentaires/th
                  /tr
                /thead
                tbody
                  ${rows}
                /tbody
              /table
            `;

            container.parentNode.insertBefore(latestRepliesContainer, container.nextSibling);
            container.dataset.modified = "true";
          });
        })
        .catch(error = {
          console.error("Erreur lors de la récupération des derniers commentaires :", error);
        });
    }
  });
/script```

mais il faut en moyenne 2 secondes pour que le contenu apparaisse. La même chose se produit avec les blocs de la barre latérale droite avec "réponses récentes". Est-ce normal ?
1 « J'aime »
2

Pourquoi ajoutez-vous du code ?

Cela fonctionne sans rien de spécial ; est-ce qu’il ne fonctionne pas pour vous ?

2 « J'aime »
3

C’est son problème.

Je dirais que c’est attendu car le code effectue plusieurs requêtes API.
Il récupère les derniers messages, puis effectue une requête par ID de sujet (15 ici) pour récupérer le nom de la catégorie.

Pour le moment, je ne sais pas s’il existe une autre solution que d’utiliser un plugin et de faire une requête SQL personnalisée, par exemple.

3 « J'aime »
4

C’est exact.
Mais les Blocs de barre latérale droite font aussi des requêtes ? Cela me donne les mêmes résultats pour les réponses récentes. Cela prend 2 secondes pour apparaître.

Je vais voir comment créer un plugin. Merci.

5

Oui, il fait la même chose pour récupérer les derniers messages, mais c’est tout. Il n’essaie pas d’obtenir le nom de la catégorie, c’est la différence.

1 « J'aime »
6

Je comprends. Merci pour votre aide.

Je vais essayer de trouver une autre solution

1 « J'aime »
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.