Properly resolving multiple twttr.widgets.createTweet promises

Question

I'm trying to add multiple tweets to a page as it is paginated. However, I cannot seem to get widget.createTweet promises to resolve in order to add their element to the page.

Here is the logic from my reduced Codepen example.

 // increment current page number
 // create next set of tweets
 // append tweet elems to masonry container
 async function paginate() {
     let current = page;
     page = page + 3;
     var tweetIDs = source.slice(current, page);

     // create tweets/widget promises
     const tweetPromises = tweetIDs.map(async id => {
         // create grid element
         let gridEl = document.createElement("div");
         // set masonry class
         gridEl.setAttribute("class", "grid__item");
         // twitter widget.js - get promise
         const response = twttr.widgets.createTweet(id, gridEl, {
             theme: colorScheme,
             dnt: true
         });
         return response;
     });

     // Promise.all over loops
     let results = Promise.all(tweetPromises).then((m) => {
         console.log("then", m); // never happens
     })
     .catch(e => {
         console.log("catch", e.reason);
     });

     console.log(tweetIDs, tweetPromises, results, page);
     // need the resolved tweets first!
     // msnry.appended(newTweetElms);
     // msnry.addItems(newTweetElms);
     // msnry.layout();
 }

Answer 1

This isn't a problem with your use of promises; Twitter just won't resolve the promises unless the element you pass into createWidget is added to the DOM.

let gridEl = document.createElement("div");
document.querySelector("#twitter").appendChild(gridEl);

Other than that, your code looks fine, aside from your use of then/catch in an async function. (It works, but it can be confusing, because you've got two different styles of asynchronous behavior.) This, for instance, makes it less obvious that your final diagnostic console.log will always show a Promise for results. If you were to log await results (and drop your "never happens" then and catch logging) your final console.log would show your array of actual elements.