fix #3679 -- "courses should show "Loading..." while loading"

sagemathinc · Mar 13, 2019 · b3f65c6 · b3f65c6
1 parent c1b887e
commit b3f65c6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/src/smc-webapp/course/main.tsx b/src/smc-webapp/course/main.tsx
@@ -188,6 +188,7 @@ interface CourseReduxProps {
   handouts: HandoutsMap;
   settings: CourseSettingsRecord;
   unsaved: boolean;
+  loading: boolean;
 
   user_map: UserMap;
 
@@ -201,6 +202,7 @@ export const CourseEditor = rclass<CourseReactProps>(
     static reduxProps = ({ name }) => {
       return {
         [name]: {
+          loading: rtypes.bool,
           error: rtypes.string,
           tab: rtypes.string,
           activity: rtypes.immutable.Map, // status messages about current activity happening (e.g., things being assigned)
@@ -353,8 +355,20 @@ export const CourseEditor = rclass<CourseReactProps>(
       );
     }
 
+    render_loading() {
+      if (!this.props.loading) {
+        return;
+      }
+      return (
+        <div style={{ textAlign: "center" }}>
+          <Loading theme={"medium"} />
+        </div>
+      );
+    }
+
     render_students() {
       if (
+        !this.props.loading &&
         this.props.redux != null &&
         this.props.students != null &&
         this.props.user_map != null &&
@@ -378,6 +392,7 @@ export const CourseEditor = rclass<CourseReactProps>(
 
     render_assignments() {
       if (
+        !this.props.loading &&
         this.props.redux != null &&
         this.props.assignments != null &&
         this.props.user_map != null &&
@@ -401,6 +416,7 @@ export const CourseEditor = rclass<CourseReactProps>(
 
     render_handouts() {
       if (
+        !this.props.loading &&
         this.props.redux != null &&
         this.props.assignments != null &&
         this.props.user_map != null &&
@@ -426,7 +442,11 @@ export const CourseEditor = rclass<CourseReactProps>(
     }
 
     render_configuration() {
-      if (this.props.redux != null && this.props.settings != null) {
+      if (
+        !this.props.loading &&
+        this.props.redux != null &&
+        this.props.settings != null
+      ) {
         return (
           <ConfigurationPanel
             redux={this.props.redux}
@@ -448,7 +468,11 @@ export const CourseEditor = rclass<CourseReactProps>(
     }
 
     render_shared_project() {
-      if (this.props.redux != null && this.props.settings != null) {
+      if (
+        !this.props.loading &&
+        this.props.redux != null &&
+        this.props.settings != null
+      ) {
         return (
           <SharedProjectPanel
             redux={this.props.redux}
@@ -466,6 +490,9 @@ export const CourseEditor = rclass<CourseReactProps>(
     }
 
     render_tabs() {
+      if (this.props.loading) {
+        return;
+      }
       return (
         <Tabs
           id={"course-tabs"}
@@ -524,6 +551,7 @@ export const CourseEditor = rclass<CourseReactProps>(
           {this.render_files_button()}
           {this.render_save_timetravel()}
           {this.render_tabs()}
+          {this.render_loading()}
         </div>
       );
     }

diff --git a/src/smc-webapp/course/store.ts b/src/smc-webapp/course/store.ts
@@ -133,6 +133,7 @@ export interface CourseState {
   expanded_skip_gradings: Set<string>;
   active_feedback_edits: IsGradingMap;
   handouts: HandoutsMap;
+  loading: boolean;  // initially loading the syncdoc from disk.
   saving: boolean;
   settings: CourseSettingsRecord;
   show_save_button: boolean;

diff --git a/src/smc-webapp/course/sync.ts b/src/smc-webapp/course/sync.ts
@@ -36,6 +36,7 @@ export let create_sync_db = (redux, actions, store, filename) => {
 
   const project_id = store.get("course_project_id");
   const path = store.get("course_filename");
+  actions.setState({loading:true});
 
   const syncdb = webapp_client.sync_db2({
     project_id,
@@ -63,7 +64,8 @@ export let create_sync_db = (redux, actions, store, filename) => {
       },
       assignments: {},
       students: {},
-      handouts: {}
+      handouts: {},
+      loading : false
     };
     for (let x of syncdb.get().toJS()) {
       if (x.table === "settings") {