-
Notifications
You must be signed in to change notification settings - Fork 101
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
feat(ui-spinner): add delay prop and functionality to the Spinner #1309
Conversation
Preview URL: https://1309--preview-instui.netlify.app |
@@ -61,6 +61,7 @@ class Spinner extends Component<SpinnerProps> { | |||
|
|||
ref: Element | null = null | |||
private readonly titleId?: string | |||
private delayTimeout?: NodeJS.Timeout |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this work with SSR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see no reason why it shouldn't.
describe('<Spinner />', () => { | ||
describe('with the delay prop', () => { | ||
it('should delay rendering', async () => { | ||
const { container } = render(<Spinner delay={1000} />) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd use a smaller delay (say 300ms) to not slow down our test suite
@@ -148,6 +164,10 @@ class Spinner extends Component<SpinnerProps> { | |||
</View> | |||
) | |||
} | |||
|
|||
render() { | |||
return this.state.shouldRender ? this.renderSpinner() : null |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would still render a transparent rectangle whenshouldRender
is false to prevent "pop in" and potential realignment of the UI. Maybe render the svg with visibility: hidden
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This would defeat the purpose of the delay, since the goal of the feature is to not disrupt the UI if the load time is small
…to the Spinner Closes: INSTUI-3884
Closes: INSTUI-3884