Please create an angular component for the loader rather than rewriting the markup repeatedly.

My apologies, I didn't realize you wanted this to be a part of an Angular component. I updated my commit so that it now utilizes the LoaderComponent.

I can't find the CSS of loader. Did you forget to include it?

The CSS of the loader is in the app.scss file. Should I move it to another folder?

Yes. Create a new file and Move it to the same component folder :)

OK, I updated my commit with the changes.

hide the loader when the carousel images have been loaded since they take more time than the posts.

Fixed. The loader now only shows when the blog posts are loading.

Use only one instance of the loader and that only on the top of the carousel images

Use only one instance of the loader.

hide loader when the images are done being fetched

@akashbhave

I guess there is a little confusion.
So there are 3 things happening on the homepage:
1. Images are fetched and shown in a slideshow at the top.
2. Social Media Feed is being fetched.
3. Blog Posts are being fetched.

We want to show/hide the loader when the 1. is done because images are of more size so if we hide the loader once all images have been loaded, social media posts and blog posts must have been fetched already since they are small in size.

I hope this makes sense.

Oh got it, so you want me to show the loader only when the updateImages() function is called.

@thelittlewonder Updated commit.

Looks good to me!