[ENHANCEMENT] Set full page spinner for better UX

[JustinASmith]

Details

• Create/Set a full page spinner component on project for better user experience.

Chirpr/client/src/App.js

Lines 31 to 46 in d859b59

	return (
	<div data-testid='app' className='App'>
	<Navigation status={isAuthed} handleLogout={handleLogout} />
	<Switch>
	{/* put exact so that the component is only rendered when http://localhost/ */}
	<PrivateRoute path='/create-profile' isAuthed={isAuthed} exact component={() => <AuthPage register={false} login={false} createProfile />} />
	<PrivateRoute path="/Feed" isAuthed={isAuthed} exact component={Feed}/>
	<PrivateRoute path='/profile' isAuthed={isAuthed} exact component={() => <Profile />} />
	<Route exact path='/' component={Landing} />
	<Route path='/register' exact component={() => <AuthPage register login={false} createProfile={false} />} />
	<Route path='/login' exact component={() => <AuthPage register={false} login createProfile={false} />} />
	{/* Add all pages above the error page! -KRW */}
	<Route path='*' component={ErrorPage} />
	</Switch>
	</div>
	)

• Above could use a full page loading component by following the gist bellow:
  https://gist.github.com/JustinASmith/00ad9e25b0d7815c6f7399cea5a6e5e9

  • Instead of return <h1>loading...</h1> you would return <FullPageSpinner/> where FullPageSpinner is a component you create under "components/FullPageSpinner/FullPageSpinner.js"

• Use already implemented spinners in bootstrap and make spinner centered on page with bootstrap css classes.

Acceptance Criteria:

• Spinner shows after user logs in or other actions that call API and/or set redux state.
• All other features are unaltered.

Story Points

Story Points: 2