Use styled-components in Loader

[adadgarg]

Progress on #1760

Changes:

• Migrate styles from _loader.scss into individual styled components in the Loader.jsx file.
• Deleted the _loader.scss.

Looks identical to before on Windows Chrome.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

Looks good at first glance. I have some thoughts but they are not necessarily problems. Just thoughts. You don't need to change anything 😄

I'm marking this as "Approved" and I just need to run your branch and verify that it looks correct before merging.

In general I think the we should not use &&& unless it's actually necessary because it makes it harder to override the styles for specific use cases which might want to extend the style. In reality it does not make a difference for the Loader because we use the same <Loader/> everywhere and do not ever override any of these styles (like "use the loader but make it a different color").

There are multiple ways to handle setting the animation-delay: -1.0s; only on the second circle. The &:nth-child(2) which you have here is definitely one of those ways and it's fine. ✔️ The potential downside is that it makes it so that LoaderCircle is not reusable as its own component since it renders differently depending on its context, but that is moot because we only use the LoaderCircle here as part of the Loader and I can't think of any other use for it. We don't even export it which is correct. Other ways would be: 1. to pass delay as a prop to the LoaderCircle component, like <LoaderCircle delay={0}/><LoaderCircle delay={-1} />. 2. To wrap the core LoaderCircle for the second circle like const DelayedLoaderCircle = styled(LoaderCircle){ animation-delay: -1s; } and have <LoaderCircle/><DelayedLoaderCircle/>. But both of those seem really overcomplicated so I think that what you have is the best option.

[Noorain464]

I would like to work on this issue