From 74bcb94a37421592620f732500b93655e842fbd4 Mon Sep 17 00:00:00 2001
From: oscar2104 <oscarluisDF21@outlook.com>
Date: Wed, 25 Sep 2024 14:13:32 -0400
Subject: [PATCH 1/2] Added loading state and adjusted tweet height in
 TwitterTimelineEmbed

---
 components/newsroom/Newsroom.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/newsroom/Newsroom.tsx b/components/newsroom/Newsroom.tsx
index 649263afaebe..377a924fb7d3 100644
--- a/components/newsroom/Newsroom.tsx
+++ b/components/newsroom/Newsroom.tsx
@@ -1,3 +1,5 @@
+import React, { useState } from 'react';
+
 import { TwitterTimelineEmbed } from 'react-twitter-embed';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
@@ -11,10 +13,14 @@ import NewsroomArticle from './NewsroomArticle';
 import NewsroomBlogPosts from './NewsroomBlogPosts';
 import NewsroomYoutube from './NewsroomYoutube';
 
+
 /**
  * @description This component displays the latest updates, blog posts, news, and videos.
  */
 export default function Newsroom() {
+
+  const [isLoaded, setIsLoaded] = useState(false);
+
   return (
     <>
       <div className='mt-12 text-center' data-testid='Newsroom-main'>
@@ -78,7 +84,13 @@ export default function Newsroom() {
           </div>
           <div className='w-full px-2 md:w-1/2 md:pl-4 md:pr-0'>
             <div className='mx-auto mt-8 w-full rounded-xl shadow-md md:mt-0' data-testid='Newsroom-Twitter'>
-              <TwitterTimelineEmbed sourceType='profile' screenName='AsyncAPISpec' options={{ tweetLimit: '2' }} />
+            {!isLoaded && <p> Loading Tweets... </p>}
+              <TwitterTimelineEmbed
+                sourceType='profile'
+                screenName='AsyncAPISpec'
+                options={{ height: '400' }}
+                onLoad={() => setIsLoaded(true)}
+              />
             </div>
           </div>
         </div>

From 71fe576473318a76fb5de06dfe53d19b00239887 Mon Sep 17 00:00:00 2001
From: oscar2104 <oscarluisDF21@outlook.com>
Date: Fri, 27 Sep 2024 17:49:31 -0400
Subject: [PATCH 2/2] Fix twitter timeline

---
 components/newsroom/Newsroom.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/newsroom/Newsroom.tsx b/components/newsroom/Newsroom.tsx
index 377a924fb7d3..dcd02a8d98de 100644
--- a/components/newsroom/Newsroom.tsx
+++ b/components/newsroom/Newsroom.tsx
@@ -5,6 +5,7 @@ import { TwitterTimelineEmbed } from 'react-twitter-embed';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
+import Loader from '../Loader';
 import ArrowRight from '../icons/ArrowRight';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
@@ -19,7 +20,7 @@ import NewsroomYoutube from './NewsroomYoutube';
  */
 export default function Newsroom() {
 
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   return (
     <>
@@ -83,13 +84,20 @@ export default function Newsroom() {
             </div>
           </div>
           <div className='w-full px-2 md:w-1/2 md:pl-4 md:pr-0'>
-            <div className='mx-auto mt-8 w-full rounded-xl shadow-md md:mt-0' data-testid='Newsroom-Twitter'>
-            {!isLoaded && <p> Loading Tweets... </p>}
+            <div className='mx-auto mt-8 w-full rounded-xl shadow-md md:mt-0' style={{ height: '500px' }} data-testid='Newsroom-Twitter'>
+            {loading && (
+                <Loader
+                  loaderText="Loading Twitter feed..."
+                  className="h-full"
+                  pulsating={true}
+                  dark={false} 
+                />
+              )}
               <TwitterTimelineEmbed
-                sourceType='profile'
-                screenName='AsyncAPISpec'
-                options={{ height: '400' }}
-                onLoad={() => setIsLoaded(true)}
+                sourceType="profile"
+                screenName="AsyncAPISpec"
+                options={{ tweetLimit: '2', height: '500' }} 
+                onLoad={() => setLoading(false)} 
               />
             </div>
           </div>