components
components copied to clipboard
Don't show loading state so low down
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 is attempting to deploy a commit to the Nylas Team on Vercel.
A member of the Team first needs to authorize it.
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) |
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 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 :)
essentially 100% of the height of the browser
How about:
Prevented the loader from taking up 100% of the height of the browser
You got it