components icon indicating copy to clipboard operation
components copied to clipboard

Don't show loading state so low down

Open bmulholland opened this issue 3 years ago • 6 comments

Code changes

The current styling assumes this mailbox will be the only component on the screen. If it's included in a UI that has something above it, that means the loading UI may even be below the fold, making the UI appear blank & broken until loading finishes. In error states, when loading never finishes, it's even worse. The sizing of the loading screen should be the responsibility of the consumer, as it knows the size the component should be.

Edit: here's a writeup that I've previously sent to Nylas Product Management:

The loading page assumes the mailbox is the only thing on the screen. It takes up essentially 100% of the height of the browser — even if there's stuff displayed above it. When it's displayed lower down on a page, with stuff above it, the loading spinner likely is often not visible unless you scroll down.

Readiness checklist

  • [ ] Added changes to component CHANGELOG.md
  • [ ] New property added? make sure to update component/src/properties.json
  • [ ] Cypress tests passing?
  • [ ] New cypress tests added?
  • [ ] Included before/after screenshots, if the change is visual

License

I confirm that this contribution is made under the terms of the MIT license and that I have the authority necessary to make this contribution on behalf of its copyright owner.

bmulholland avatar Oct 14 '22 10:10 bmulholland

@bmulholland is attempting to deploy a commit to the Nylas Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Oct 14 '22 10:10 vercel[bot]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
components ❌ Failed (Inspect) Oct 20, 2022 at 1:30PM (UTC)

vercel[bot] avatar Oct 14 '22 10:10 vercel[bot]

Thanks for the PR @bmulholland! Would you mind updating your fork to the latest changes from the main repo and adding a line to the CHANGELOG, under the unreleased section? If you update your fork at minimum, I can go a head and add the change log line.

AaronDDM avatar Oct 20 '22 13:10 AaronDDM

@AaronDDM sure, updated. I'm not sure how you'd want to describe this in the CHANGELOG; if you give me the text, I'm happy to amend the commit. Otherwise I'll leave it to you :)

bmulholland avatar Oct 20 '22 13:10 bmulholland

essentially 100% of the height of the browser

How about:

Prevented the loader from taking up 100% of the height of the browser

AaronDDM avatar Oct 20 '22 13:10 AaronDDM

You got it

bmulholland avatar Oct 20 '22 13:10 bmulholland