Resolve "Fix redux actions in editor"

client/src/pages/presentationEditor/PresentationEditorPage.tsx

-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}>

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 })

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%;
+`

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 {