fix(ui): Replace current spinning webfont icon with svg icons

[surajyadav1108]

Webfonts have a problem in spinning icons (wobbling issue) which is well discussed and documented
reference: FortAwesome/Font-Awesome#16495

Closes: #10065

This might look like an overkill to fix this minor issue but Switching to svg was the only way. I did try tweaking css but didn't work.

before:

180071953-9753a616-8b90-4153-9986-8d22439ee13e.mov

broken-icon-spinner-2.mp4

After:

fixed-spinner-light-2.mp4

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

❗ Preview Environment undeploy from Bunnyshell failed

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to try again to remove the environment

[linghaoSu]

It seems the color is missing when the pod is in the loading state. Could we look into fixing this?

Before

Now

[surajyadav1108]

Thanks for pointing it out @linghaoSu
I think this should work now

pod-color-fix.mp4

[nitishfy]

LGTM!

[pasha-codefresh]

@surajyadav1108 could you please resolve conflicts ?

[surajyadav1108]

@surajyadav1108 could you please resolve conflicts ?

Resolved.

[crenshaw-dev]

This change is awesome! My only concern is the affect on bundle size.

Before:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (16.5 MiB)
      main.b9d7eb03e2adee59afc8.js

After:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (19.2 MiB)
      main.ee9e8916fc9c34c77899.js

Is there some tree-shaking improvement we can make? Alternatively, can we just hard-code the part we need?

[surajyadav1108]

This change is awesome! My only concern is the affect on bundle size.

Before:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (16.5 MiB)
      main.b9d7eb03e2adee59afc8.js

After:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (19.2 MiB)
      main.ee9e8916fc9c34c77899.js

Is there some tree-shaking improvement we can make? Alternatively, can we just hard-code the part we need?

will try and hardcode all spinning SVGs

[surajyadav1108]

you can merge this now @crenshaw-dev used SVG directly

Screenshots

Spinning-icon-svg.mp4

spinning-icon-svg-3.mp4

[crenshaw-dev]

Thanks, @surajyadav1108! One more request: can you add comments where the SVGs are hard-coded linking to the original source? And we might have to provide some kind of copyright notice to comply with the upstream license.

[surajyadav1108]

@crenshaw-dev Added original resource, sorry for the late response 😅

stale