Skip to content

Video 4525 loading screen #461

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Mar 24, 2021
Merged

Video 4525 loading screen #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
921a65f
add loading screen while connecting to a room
olipyskoty Mar 18, 2021
2f474a4
update test for loading screen
olipyskoty Mar 18, 2021
1d27267
remove unnecesary material ui components
olipyskoty Mar 24, 2021
a1ae591
update test to confirm loading spinner is shown
olipyskoty Mar 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/components/PreJoinScreens/DeviceSelectionScreen/DeviceSelectionScreen.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import DeviceSelectionScreen from './DeviceSelectionScreen';
import CircularProgress from '@material-ui/core/CircularProgress';
import { shallow } from 'enzyme';
import { Steps } from '../PreJoinScreens';
import { useAppState } from '../../../state';
Expand Down Expand Up @@ -35,8 +36,8 @@ describe('the DeviceSelectionScreen component', () => {

const wrapper = shallow(<DeviceSelectionScreen name="test name" roomName="test room name" setStep={() => {}} />);

it('should disable the Join Now button', () => {
expect(wrapper.find({ children: 'Join Now' }).prop('disabled')).toBe(true);
it('should show the loading screen', () => {
expect(wrapper.find(CircularProgress).exists()).toBe(true);
});

it('should disable the desktop and mobile toggle video buttons', () => {
Expand Down Expand Up @@ -79,8 +80,8 @@ describe('the DeviceSelectionScreen component', () => {
mockUseAppState.mockImplementationOnce(() => ({ getToken: mockGetToken, isFetching: true }));
const wrapper = shallow(<DeviceSelectionScreen name="test name" roomName="test room name" setStep={() => {}} />);

it('should disable the Join Now button', () => {
expect(wrapper.find({ children: 'Join Now' }).prop('disabled')).toBe(true);
it('should show the loading screen', () => {
expect(wrapper.find(CircularProgress).exists()).toBe(true);
});

it('should disable the desktop and mobile toggle video buttons', () => {
Expand Down
16 changes: 16 additions & 0 deletions src/components/PreJoinScreens/DeviceSelectionScreen/DeviceSelectionScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { makeStyles, Typography, Grid, Button, Theme, Hidden } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import LocalVideoPreview from './LocalVideoPreview/LocalVideoPreview';
import SettingsMenu from './SettingsMenu/SettingsMenu';
import { Steps } from '../PreJoinScreens';
Expand Down Expand Up @@ -71,6 +72,21 @@ export default function DeviceSelectionScreen({ name, roomName, setStep }: Devic
});
};

if (isFetching || isConnecting) {
return (
<Grid container justify="center" alignItems="center" direction="column" style={{ height: '100%' }}>
<div>
<CircularProgress variant="indeterminate" />
</div>
<div>
<Typography variant="body2" style={{ fontWeight: 'bold', fontSize: '16px' }}>
Joining Meeting
</Typography>
</div>
</Grid>
);
}

return (
<>
<Typography variant="h5" className={classes.gutterBottom}>
Expand Down