Added loading state and adjusted tweet height in TwitterTimelineEmbed #3256
Conversation
osdas
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
|
We require all PRs to follow Conventional Commits specification. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
asyncapi-bot
requested review from
devilkiller-ag,
sambhavgupta0705,
BhaswatiRoy,
J0SAL,
TRohit20 and
VaishnaviNandakumar
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on undefined |
components/newsroom/Newsroom.tsx
Outdated
| @@ -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>} | |||
There was a problem hiding this comment.
There is a loader component present in the codebase. You should use that here.
components/newsroom/Newsroom.tsx
Outdated
| @@ -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>} | |||
There was a problem hiding this comment.
I think it will look nicer, if the twitter timeline component while loading has the same height as that of the loaded twitter timeline component? 🤔
@akshatnema what's your suggestion on this?
|
Hey @osdas, Could you please point me to where I can find this issue in the deploy preview? I'm reviewing the PR, but I'm not sure exactly where to look. Is it related to the Thanks for your help! |
|
closing this as no response |
Description
Implemented a loading state for the Twitter embed to improve user experience by showing a "Loading Tweets..." message while the tweets are being fetched.
Adjusted the height of the embedded Twitter timeline to 400px for better display control and to limit the space taken up by the tweets.
Ensured that only a limited number of tweets are displayed by utilizing the tweetLimit option.