Video 4525 loading screen

[olipyskoty]

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

• VIDEO-4525

Description

This PR adds a loading spinner while a participant is connecting to a room as it takes a second or two longer to join due to the addition of the new conversations feature.

Note, because this spinner shows if either isFetching or isConnecting is true, the screen with the Join Now button is replaced by the loading screen. Therefore, I had to remove the following test from describe('when connecting a room', () => {...}) and describe('when fetching a token', () => {...}):

it('should disable the Join Now button', () => {...}

Please let me know if I should have handled this differently!

web:

mobile:

Burndown

Before review

• Updated CHANGELOG.md if necessary
• Added unit tests if necessary
• Updated affected documentation
• Verified locally with npm test
• Manually sanity tested running locally
• Included screenshot as PR comment (if needed)
• Ready for review

Before merge

• Got one or more +1s
• Re-tested if necessary

[timmydoza]

Nit - I think these work the same as plain divs:

Suggested change

	<Grid item>
	<CircularProgress variant="indeterminate" />
	</Grid>
	<Grid item>
	<Typography variant="body2" style={{ fontWeight: 'bold', fontSize: '16px' }}>
	Joining Meeting
	</Typography>
	</Grid>
	<div>
	<CircularProgress variant="indeterminate" />
	</div>
	<div>
	<Typography variant="body2" style={{ fontWeight: 'bold', fontSize: '16px' }}>
	Joining Meeting
	</Typography>
	</div>

[timmydoza]

Nit - I'm finding that spacing={2} is adding some styles that are making it so the loading wheel isn't perfectly centered. These are the styles that are added:

MuiGrid-spacing-xs-2 {
    width: calc(100% + 16px);
    margin: -8px;
}

Let's remove it so that it is perfectly centered.

Suggested change

	<Grid container justify="center" spacing={2} alignItems="center" direction="column" style={{ height: '100%' }}>
	<Grid container justify="center" alignItems="center" direction="column" style={{ height: '100%' }}>

[timmydoza]

Nit - Here I don't think we need to look at the variant prop. It's hardcoded and won't change. We just need to know if the spinner is there or not, so I think we can do something like this (same with line 84):

Suggested change

	expect(wrapper.find(CircularProgress).prop('variant')).toBe('indeterminate');
	expect(wrapper.find(CircularProgress).exists()).toBe(true);