Responsive Notifications Page Using Tailwind CSS & Vanilla Javascript
Design comparison
Solution retrospective
I used this as an opportunity to practice loading content via javascript. I created a data object and loaded the content via the data object (as if the data came from an API or database).
My big question is, how can I prevent the empty notifications page from flickering before javascript pulls in the notifications? I'd like to add a template like many sites do and display that until the javascript loads with all the notifications. Any help is much appreciated. Thanks!
Community feedback
- @ABojoPosted over 1 year ago
The project looks great!
The flickering is extreme because the container is being forced to grow when the notifications are rendered. It would be best if you sized the container so it doesn't have to grow as much when content is added. If you set a minimum height and a width/max-width the container will stay about the same size.
Also, you could create greyed out notification templates to sit inside the notification container when the page loads. You could remove them by wiping the innerHTML of the container right before you render the actual notifications.
Marked as helpful0@jacksonwhitingPosted over 1 year ago@ABojo Thank you for the helpful comment. What event do I listen for to know that the JavaScript has loaded and can remove the template?
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord