perf(news): improved news page performance

src/SEQTA.ts

@@ -2528,72 +2528,76 @@ function createNewShortcut(link: any, icon: any, viewBox: any, title: any) {
   document.getElementById('shortcuts')!.appendChild(shortcut)
 }
 
-export function SendNewsPage() {
+export async function SendNewsPage() {
-  setTimeout(function () {
+  console.info('[BetterSEQTA+] Started Loading News Page')
-    // Sends the html data for the home page
+  document.title = 'News ― SEQTA Learn'
-    console.info('[BetterSEQTA+] Started Loading News Page')
+  await delay(100)
-    document.title = 'News ― SEQTA Learn'
-    var element = document.querySelector('[data-key=news]')
 
-    // Apply the active class to indicate clicked on home button
+  const element = document.querySelector('[data-key=news]')
-    element!.classList.add('active')
+  element!.classList.add('active')
 
-    // Remove all current elements in the main div to add new elements
+  // Remove all current elements in the main div to add new elements
-    var main = document.getElementById('main')
+  const main = document.getElementById('main')
-    main!.innerHTML = ''
+  main!.innerHTML = ''
 
-    // Creates the root of the home page added to the main div
+  const html = stringToHTML(/* html */`
-    var htmlStr = '<div class="home-root"><div class="home-container" id="news-container"><h1 class="border">Latest Headlines - ABC News</h1></div></div>'
+    <div class="home-root">
+      <div class="home-container" id="news-container">
+        <h1 class="border">Latest Headlines - ABC News</h1>
+      </div>
+    </div>`)
 
-    var html = stringToHTML(htmlStr)
+  main!.append(html.firstChild!)
-    // Appends the html file to main div
-    // Note : firstChild of html is done due to needing to grab the body from the stringToHTML function
-    main!.append(html.firstChild!)
 
-    const titlediv = document.getElementById('title')!.firstChild;
+  const titlediv = document.getElementById('title')!.firstChild;
-    (titlediv! as HTMLElement).innerText = 'News'
+  (titlediv! as HTMLElement).innerText = 'News'
-    AppendLoadingSymbol('newsloading', '#news-container')
+  AppendLoadingSymbol('newsloading', '#news-container')
 
-    browser.runtime.sendMessage({ type: 'sendNews' }).then(function (response) {
+  const response = await browser.runtime.sendMessage({ type: 'sendNews' })
-      let newsarticles = response.news.articles
+  const newscontainer = document.querySelector('#news-container')
-      var newscontainer = document.querySelector('#news-container')
+  document.getElementById('newsloading')?.remove()
-      document.getElementById('newsloading')?.remove()
-      for (let i = 0; i < newsarticles.length; i++) {
-        let newsarticle = document.createElement('a')
-        newsarticle.classList.add('NewsArticle')
-        newsarticle.href = newsarticles[i].url
-        newsarticle.target = '_blank'
 
-        let articleimage = document.createElement('div')
+  // Create a document fragment to batch DOM operations
-        articleimage.classList.add('articleimage')
+  const fragment = document.createDocumentFragment()
 
-        if (newsarticles[i].urlToImage == 'null') {
+  // Map over articles to create elements
-          articleimage.style.backgroundImage = `url(${browser.runtime.getURL(LogoLightOutline)})`
+  response.news.articles.forEach((article: any) => {
-          articleimage.style.width = '20%'
+    const newsarticle = document.createElement('a')
-          articleimage.style.margin = '0 7.5%'
+    newsarticle.classList.add('NewsArticle')
-        } else {
+    newsarticle.href = article.url
-          articleimage.style.backgroundImage = `url(${newsarticles[i].urlToImage})`
+    newsarticle.target = '_blank'
-        }
 
-        let articletext = document.createElement('div')
+    const articleimage = document.createElement('div')
-        articletext.classList.add('ArticleText')
+    articleimage.classList.add('articleimage')
-        let title = document.createElement('a')
-        title.innerText = newsarticles[i].title
-        title.href = newsarticles[i].url
-        title.target = '_blank'
 
-        let description = document.createElement('p')
+    if (article.urlToImage == 'null') {
-        description.innerHTML = newsarticles[i].description
+      articleimage.style.cssText = `
+        background-image: url(${browser.runtime.getURL(LogoLightOutline)});
+        width: 20%;
+        margin: 0 7.5%;
+      `
+    } else {
+      articleimage.style.backgroundImage = `url(${article.urlToImage})`
+    }
 
-        articletext.append(title)
+    const articletext = document.createElement('div')
-        articletext.append(description)
+    articletext.classList.add('ArticleText')
+    
+    const title = document.createElement('a')
+    title.innerText = article.title
+    title.href = article.url
+    title.target = '_blank'
 
-        newsarticle.append(articleimage)
+    const description = document.createElement('p')
-        newsarticle.append(articletext)
+    description.innerHTML = article.description
-        newscontainer?.append(newsarticle)
+
-      }
+    articletext.append(title, description)
-    })
+    newsarticle.append(articleimage, articletext)
-  }, 8)
+    fragment.append(newsarticle)
+  })
+
+  // Single DOM update to append all articles
+  newscontainer?.append(fragment)
 }
 
 async function CheckForMenuList() {