diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx index 0bfea0c46e0b8a4b4df6a5299a34c42c737c63bd..c6f5acecd29a5339dfe8d467e195237df238cb88 100644 --- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx +++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx @@ -1,4 +1,4 @@ -import { Divider, Typography } from '@material-ui/core' +import { CircularProgress, Divider, Typography } from '@material-ui/core' import AppBar from '@material-ui/core/AppBar' import CssBaseline from '@material-ui/core/CssBaseline' import Drawer from '@material-ui/core/Drawer' @@ -13,7 +13,14 @@ import { useAppDispatch, useAppSelector } from '../../hooks' import { Content } from '../views/styled' import SettingsPanel from './components/SettingsPanel' import SlideEditor from './components/SlideEditor' -import { PresentationEditorContainer, SlideListItem, ToolBarContainer, ViewButton, ViewButtonGroup } from './styled' +import { + CenteredSpinnerContainer, + PresentationEditorContainer, + SlideListItem, + ToolBarContainer, + ViewButton, + ViewButtonGroup, +} from './styled' function createSlide(name: string) { return { name } @@ -66,6 +73,7 @@ const PresentationEditorPage: React.FC = () => { const dispatch = useAppDispatch() const activeSlideId = useAppSelector((state) => state.editor.activeSlideId) const competition = useAppSelector((state) => state.editor.competition) + const competitionLoading = useAppSelector((state) => state.editor.loading) // TODO: wait for dispatch to finish useEffect(() => { dispatch(getEditorCompetition(id)) @@ -131,7 +139,13 @@ const PresentationEditorPage: React.FC = () => { }} anchor="right" > - <SettingsPanel></SettingsPanel> + {!competitionLoading ? ( + <SettingsPanel /> + ) : ( + <CenteredSpinnerContainer> + <CircularProgress /> + </CenteredSpinnerContainer> + )} </Drawer> <Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}> diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx index 75f6ed13d50d0852b59398b6d40effe72cceabae..6791ce549c9bf24c1538b35a4ac7fbe8a73dfe56 100644 --- a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx +++ b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx @@ -64,7 +64,6 @@ const CompetitionSettings: React.FC = () => { const { id }: CompetitionParams = useParams() const dispatch = useAppDispatch() const competition = useAppSelector((state) => state.editor.competition) - const updateCompetitionName = async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { await axios .put(`/competitions/${id}`, { name: event.target.value }) diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx index 462acf2e64259c13ab74830c7d2484fe2881267e..a2c6e6f79cafb4ade856c8ae8cf1bca23e89eb1a 100644 --- a/client/src/pages/presentationEditor/styled.tsx +++ b/client/src/pages/presentationEditor/styled.tsx @@ -23,3 +23,10 @@ export const SlideListItem = styled(ListItem)` export const PresentationEditorContainer = styled.div` height: 100%; ` + +export const CenteredSpinnerContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + height: 100%; +` diff --git a/client/src/reducers/editorReducer.ts b/client/src/reducers/editorReducer.ts index 627c1658fc7419d3c84c9932d3dfc42bc3b18178..81b10c32d206d8870a7cbee38c632991330b7149 100644 --- a/client/src/reducers/editorReducer.ts +++ b/client/src/reducers/editorReducer.ts @@ -5,6 +5,7 @@ import { RichCompetition } from '../interfaces/ApiRichModels' interface EditorState { competition: RichCompetition activeSlideId: number + loading: boolean } const initialState: EditorState = { @@ -17,6 +18,7 @@ const initialState: EditorState = { teams: [], }, activeSlideId: 0, + loading: true, } export default function (state = initialState, action: AnyAction) { @@ -25,6 +27,7 @@ export default function (state = initialState, action: AnyAction) { return { competition: action.payload as RichCompetition, activeSlideId: action.payload.slides[0].id as number, + loading: false, } case Types.SET_EDITOR_SLIDE_ID: return {