feat: implement MUI skeleton for loading assets/ components

[ashuvssut]

Description

• Use MUI skeleton as a placeholder when components/assets are loading
• Use this component in
  • Youtube player
  • Try to implement this skeleton component in components/Image global component. We load all out images using this Image component only.
  • Any gifs... etc etc

[senali-d]

Hey @ashuvssut, I like to work on this. Can you assign it to me.

[senali-d]

When was the skeleton component need to load.

[ashuvssut]

@senali-d

We have always used our custom Image global component to render images. There are some props like onLoad & onLoadComplete (ref Nextjs docs on next/image for this) that you can use to detect when the image has loaded/failed to load. Implementing a rectangular Skeleton compo must be simple for these image components. You need to implement the Skeleton compo in components/Image.tsx

for gif images, you can always put a conditional to show a skeleton compo and then show the image when it has loaded .

For youtube player, you have to figure out this part. I have not put much thought for this one. Maybe checkout React Player docs to find out if there is a way to detect the loading state.