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

feat(ui-spinner): add delay prop and functionality to the Spinner #1309

Merged
merged 1 commit into from
Oct 11, 2023

Conversation

HerrTopi
Copy link
Contributor

@HerrTopi HerrTopi commented Oct 9, 2023

Closes: INSTUI-3884

@HerrTopi HerrTopi requested review from matyasf and joyenjoyer October 9, 2023 23:17
@github-actions
Copy link

github-actions bot commented Oct 9, 2023

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
Copy link
Contributor

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?

Copy link
Contributor Author

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.

@HerrTopi HerrTopi requested review from joyenjoyer and balzss October 11, 2023 08:50
describe('<Spinner />', () => {
describe('with the delay prop', () => {
it('should delay rendering', async () => {
const { container } = render(<Spinner delay={1000} />)
Copy link
Collaborator

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
Copy link
Collaborator

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?

Copy link
Contributor Author

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

@HerrTopi HerrTopi merged commit 1f44e5d into master Oct 11, 2023
4 checks passed
@HerrTopi HerrTopi deleted the spinner branch October 11, 2023 14:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants