Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replaced loading svg icon with Loader component #16002

Merged

Conversation

Ciggzy1312
Copy link
Contributor

@Ciggzy1312 Ciggzy1312 commented Jan 24, 2023

Description

Replaced the SVG loading icon for search with a new Spinner component

Related Issue(s)

Fixes #15896

How to test

Release Notes

Replace loading SVG icon with the Loader component

Documentation

Build Options:

  • /werft with-github-actions
    Experimental feature to run the build with GitHub Actions (and not in Werft).
  • leeway-no-cache
    leeway-target=components:all-ci
  • /werft no-test
    Run Leeway with --dont-test

Preview Environment Options:

  • /werft with-local-preview
    If enabled this will build install/preview
  • /werft with-preview
  • /werft with-large-vm
  • /werft with-gce-vm
    If enabled this will create the environment on GCE infra
  • /werft with-integration-tests=all
    Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

@Ciggzy1312 Ciggzy1312 requested a review from a team January 24, 2023 11:22
@werft-gitpod-dev-com
Copy link

annotations in the pull request changed, but user is not allowed to start a job

@werft-gitpod-dev-com
Copy link

started the job as gitpod-build-15896-replace-svg-with-loader-component.0 because the annotations in the pull request description changed
(with .werft/ from main)

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 24, 2023

/werft run with-preview

👍 started the job as gitpod-build-15896-replace-svg-with-loader-component-fork.0
(with .werft/ from main)

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 27, 2023

@Ciggzy1312 Could you rebase and resolve conflicts in this one? Thanks! 🙏

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 27, 2023

/werft run with-preview

👍 started the job as gitpod-build-15896-replace-svg-with-loader-component-fork.1
(with .werft/ from main)

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 27, 2023

/werft run with-preview

👍 started the job as gitpod-build-15896-replace-svg-with-loader-component-fork.2
(with .werft/ from main)

@Ciggzy1312
Copy link
Contributor Author

@gtsiolis done, do check it and let me know

Copy link
Contributor

@gtsiolis gtsiolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @Ciggzy1312!

UX LGTM. 🏁

Added one comment about the SVG icon.

/hold

@@ -15,6 +15,7 @@ import CheckBox from "../components/CheckBox";
import { ItemFieldContextMenu } from "../components/ItemsList";
import { ContextMenuEntry } from "../components/ContextMenu";
import Alert from "../components/Alert";
import { SpinnerLoader } from "../components/Loader";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: The SVG added seems cropped, although it renders ok. Is this using the code from #15896 (comment)? I'm adding below one more version with a square bounding box.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
  <g clip-path="url(#a)">
    <path fill="#A8A29E" fill-rule="evenodd" d="M11.4284.944629C10.2681.324456 8.97283 0 7.65722 0v3c2.76138 0 4.99998 2.23858 4.99998 5 0 2.7614-2.2386 5-4.99998 5-1.38071 0-2.63071-.5596-3.53553-1.4645l-2.12132 2.1214c.93027.9302 2.07561 1.6167 3.33457 1.9986 1.25896.3819 2.59267.4474 3.883.1908 1.29036-.2567 2.49746-.8276 3.51446-1.6622 1.0169-.8346 1.8124-1.9072 2.3159-3.1226.5034-1.2155.6994-2.53636.5704-3.84564-.129-1.30927-.5788-2.56653-1.3097-3.66042-.7309-1.09389-1.7203-1.99064-2.8806-2.610811Z" clip-rule="evenodd"/>
  </g>
  <defs>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h16v16H0z"/>
    </clipPath>
  </defs>
</svg>

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 27, 2023

/werft run with-preview

👍 started the job as gitpod-build-15896-replace-svg-with-loader-component-fork.3
(with .werft/ from main)

@Ciggzy1312
Copy link
Contributor Author

@gtsiolis should be working this time
Let me know if any more changes needed

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 27, 2023

/werft run with-clean-slate-deployment=true with-preview=true recreate-vm=true

👍 started the job as gitpod-build-15896-replace-svg-with-loader-component-fork.4
(with .werft/ from main)

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 27, 2023

Thanks, @Ciggzy1312! Updates look good. ✨

@geropl Could you take a look or pass this to someone from the @gitpod-io/engineering-webapp team? 🏀

@stale
Copy link

stale bot commented Feb 12, 2023

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the meta: stale This issue/PR is stale and will be closed soon label Feb 12, 2023
@gtsiolis
Copy link
Contributor

gtsiolis commented Feb 13, 2023

Still relevant. Let's loop in @gitpod-io/engineering-webapp again in case this feel between the cracks. 🏓

@stale stale bot removed the meta: stale This issue/PR is stale and will be closed soon label Feb 13, 2023
@gtsiolis gtsiolis force-pushed the 15896/replace-svg-with-loader-component branch from b3fc5be to 1f6e808 Compare February 15, 2023 12:59
@gtsiolis
Copy link
Contributor

gtsiolis commented Feb 15, 2023

/werft run with-preview

👍 started the job as gitpod-build-15896-replace-svg-with-loader-component-fork.5
(with .werft/ from main)

@gtsiolis
Copy link
Contributor

gtsiolis commented Feb 15, 2023

Updated the commits and the SVG icon.

Removing hold as changes look trivial and this can save the @gitpod-io/engineering-webapp from one more review.

Thanks, @Ciggzy1312! 🍊

/unhold

@roboquat roboquat merged commit 5ee1a2f into gitpod-io:main Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace the custom SVG icon used for the search loading state with the Loader component
3 participants