Page MenuHomePhabricator
Differential D8285

[web] Add `showSpinner` prop to `Avatar` component
ClosedPublic
Actions

Authored by atul on Jun 21 2023, 3:24 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:37 PM
Unknown Object (File)
Sat, Mar 15, 4:35 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:01 PM
Unknown Object (File)
Wed, Mar 5, 3:57 PM
Unknown Object (File)
Tue, Feb 25, 11:46 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
Commits
rCOMM0bf79d623ea4: [web] Add `showSpinner` prop to `Avatar` component
Summary

Add showSpinner?: boolean prop to the Avatar component and display LoadingIndicator over Avatar if set to true.

Depends on D8283

Test Plan

Looks as expected:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Jun 21 2023, 3:24 PM
Herald added a subscriber: tomek. · View Herald TranscriptJun 21 2023, 3:24 PM
atul published this revision for review.Jun 21 2023, 3:26 PM
atul edited the test plan for this revision. (Show Details)
atul added inline comments.Jun 21 2023, 3:29 PM
web/avatars/avatar.react.js
68–77 ↗(On Diff #27984)

Made sure things looked okay at each size:

c6c316.png (102×142 px, 9 KB)

fce579.png (74×70 px, 6 KB)

e3c706.png (58×98 px, 5 KB)

4e0a45.png (256×314 px, 38 KB)

atul attached a referenced file: F600891: 4e0a45.png. (Show Details)Jun 21 2023, 3:29 PM
atul attached a referenced file: F600890: e3c706.png. (Show Details)
atul attached a referenced file: F600889: fce579.png. (Show Details)
atul attached a referenced file: F600888: c6c316.png. (Show Details)
atul added a child revision: D8286: [web] Remove `LoadingIndicator` from `EditUserAvatar`.Jun 21 2023, 3:39 PM
Harbormaster completed remote builds in B20412: Diff 27984.Jun 21 2023, 3:47 PM
rohan accepted this revision.Jun 22 2023, 6:29 AM
This revision is now accepted and ready to land.Jun 22 2023, 6:29 AM
atul updated this revision to Diff 28081.Jun 23 2023, 1:56 PM

rebase before landing

This revision was landed with ongoing or failed builds.Jun 23 2023, 2:07 PM
Closed by commit rCOMM0bf79d623ea4: [web] Add `showSpinner` prop to `Avatar` component (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM0bf79d623ea4: [web] Add `showSpinner` prop to `Avatar` component.
Harbormaster completed remote builds in B20495: Diff 28081.Jun 23 2023, 2:41 PM

Revision Contents
Changeset List

PathSize
web/
avatars/
11 lines
31 lines
6 lines

Diff 28095

View Options

web/avatars/avatar.css

Show All 31 Lines.questionText {
color: var(--white-100); color: var(--white-100);
} }
.icon { .icon {
margin-left: 24px; margin-left: 24px;
} }
.answerContainer { .answerContainer {
max-height: 0; display: grid;
overflow: hidden; grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
} }
.activeAnswerContainer { .activeAnswerContainer {
max-height: fit-content; grid-template-rows: 1fr;
} }
.answerText { .answerText {
color: var(--white-100); color: var(--white-100);
margin-top: 16px; margin-top: 16px;
overflow: hidden;
} }
.link { .link {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
transition: color 150ms; transition: color 150ms;
} }
.link:hover { .link:hover {
color: var(--violet-dark-100); color: var(--violet-dark-100);
transition: color 150ms; transition: color 150ms;
} }
View Options

web/avatars/avatar.react.js

Show All 31 Lines.questionText {
color: var(--white-100); color: var(--white-100);
} }
.icon { .icon {
margin-left: 24px; margin-left: 24px;
} }
.answerContainer { .answerContainer {
max-height: 0; display: grid;
overflow: hidden; grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
} }
.activeAnswerContainer { .activeAnswerContainer {
max-height: fit-content; grid-template-rows: 1fr;
} }
.answerText { .answerText {
color: var(--white-100); color: var(--white-100);
margin-top: 16px; margin-top: 16px;
overflow: hidden;
} }
.link { .link {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
transition: color 150ms; transition: color 150ms;
} }
.link:hover { .link:hover {
color: var(--violet-dark-100); color: var(--violet-dark-100);
transition: color 150ms; transition: color 150ms;
} }
View Options

web/avatars/emoji-avatar-selection-modal.react.js

Show All 31 Lines.questionText {
color: var(--white-100); color: var(--white-100);
} }
.icon { .icon {
margin-left: 24px; margin-left: 24px;
} }
.answerContainer { .answerContainer {
max-height: 0; display: grid;
overflow: hidden; grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
} }
.activeAnswerContainer { .activeAnswerContainer {
max-height: fit-content; grid-template-rows: 1fr;
} }
.answerText { .answerText {
color: var(--white-100); color: var(--white-100);
margin-top: 16px; margin-top: 16px;
overflow: hidden;
} }
.link { .link {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
transition: color 150ms; transition: color 150ms;
} }
.link:hover { .link:hover {
color: var(--violet-dark-100); color: var(--violet-dark-100);
transition: color 150ms; transition: color 150ms;
} }