feat: Banner image placeholder and fallback background

[DukeManh]

Issue This PR Addresses

Fixes #2925

• Add loading banner image background by displaying a tiny 40px wide image (minimal loading time) and transitioning in the main 2000px wide image (long loading time) when it finishes loading
• Add fallback gradient banner background
• Fix inconsistent image src, request a specific photo versus a random image chosen by the backend

Test

• Pull this change locally
• Run server:

   cd src/api/image && pnpm dev

   // in another terminal
   cp config/env.staging .env

   // change IMAGE_URL in .env
   # Image Service URL
   IMAGE_URL=http://localhost:4444

  // Run the frontend
  pnpm dev

• to see that a gradient background is shown first, followed by a placeholder image, and then the high resolution image.
• If you are not able to see the difference, your internet is probably too fast, good. Go to the Network tab, click disable cache, and choose one of the throttling options.

Screenshot

2022-03-12.15-15-44.mp4

[gitpod-io]

[humphd]

So cool, I love it. A few things I notice.

[DukeManh]

@humphd, I'm running this again and the images fail to load. Do you know what this error is?

[humphd]

I'm not 100% sure. Is that Firefox? Do you have a Service Worker on localhost:4444 that's interfering somehow (try changing port)?

[DukeManh]

I'm not 100% sure. Is that Firefox? Do you have a Service Worker on localhost:4444 that's interfering somehow (try changing port)?

It's on any browser I try.

Looks like something was changed on master recently that make the image service have CORS issue. I rebased and have the issue.

I filed #3212

[DukeManh]

This is currently blocked by #3212, which makes it hard to test.

[humphd]

This is a nice touch.

[RC-Lee]

I'm wondering if we might need to come to a consensus if we're ignoring Eslint tests until #3228 has been merged.
Do we approve if all other tests pass

[humphd]

@rclee91 I think that's fine, and we can fix things that we catch when the checks are working properly.

[DukeManh]

It's interesting that ESLint recommends Number.isNaN instead of isNaN, but they behave a bit differently. https://stackoverflow.com/questions/33164725/confusion-between-isnan-and-number-isnan-in-javascript