Hiding parts before the page components loads

It's names "Skeleton Loading". You can do it just using HTML and CSS.

There is some libraries out there if you want to use them directly by no effort, just search for "Skeleton Loading". Or I recommend you to watch this video.

These pages use a javascript framework such Angular, React, or Vue. They use something called a lifecycle hook. I'm most familiar with Vue.js, but there are different ones depending on when they are called/what is loaded. They more than likely use a before mounted & mounted lifecycle hook which performs actions until an item is fully loaded, then performs different actions.

If you don't use a library, and are looking to - I'd recommend Vue.js ecause you don't have to install/learn node.js to use it on a page, only need a CDN, and the link I used below will show you how to prevent your page elements from being viewed before they are loaded.

https://v3.vuejs.org/api/options-lifecycle-hooks.html

https://angular.io/guide/lifecycle-hooks

https://reactjs.org/docs/state-and-lifecycle.html