Display a soft "Loading..." mask until page is ready (#4629)

* Soft "Loading..." mask * Update changelog * Emit the event after 'getConfig' * Fix summaryBackground location
pymedusa · Jul 10, 2018 · ef96dba · ef96dba
1 parent e09d270
commit ef96dba
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
   - `/addShows` - Add Shows ([#4564](https://github.com/pymedusa/Medusa/pull/4564))
   - `/addRecommended` - Add Recommended Shows ([#4564](https://github.com/pymedusa/Medusa/pull/4564))
 - Removed the old `/ui` route ([#4565](https://github.com/pymedusa/Medusa/pull/4565))
+- Added a simple "Loading..." message while the page is loading ([#4629](https://github.com/pymedusa/Medusa/pull/4629))
 - _Simple message describing the improvement, and a link to the pull request._
 
 **Fixes**

diff --git a/themes-default/slim/views/displayShow.mako b/themes-default/slim/views/displayShow.mako
@@ -28,6 +28,14 @@ const startVue = () => {
             const { $store } = this;
             $store.dispatch('getShows'); // Used by show-selector component
         },
+        mounted() {
+            // Adjust the summary background position and size on page load and resize
+            this.$once('loaded', () => {
+                this.$nextTick(() => {
+                    window.dispatchEvent(new Event('resize'));
+                });
+            });
+        }
     });
 };
 </script>

diff --git a/themes-default/slim/views/layouts/main.mako b/themes-default/slim/views/layouts/main.mako
@@ -62,7 +62,12 @@
             % endif
             <%include file="/partials/alerts.mako"/>
                <div id="content-row" class="row">
-                    <div id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
+                    <div v-if="globalLoading" class="text-center ${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
+                        <h3>Loading....</h3>
+                        If this is taking too long,<br>
+                        <i style="cursor: pointer;" @click="globalLoading = false;">click here</i> to show the page.
+                    </div>
+                    <div :style="globalLoading ? { opacity: '0 !important' } : undefined" id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
                         <%block name="content" />
                     </div>
                </div><!-- /content -->
@@ -164,20 +169,31 @@
 
             // @TODO: Remove this before v1.0.0
             Vue.mixin({
+                data() {
+                    return {
+                        globalLoading: true
+                    };
+                },
                 mounted() {
                     if (this.$root === this && !document.location.pathname.endsWith('/login/')) {
                         // We wait 1000ms to allow the mutations to show in vue dev-tools
                         // Please see https://github.com/egoist/puex/issues/8
                         setTimeout(() => {
                             const { store } = window;
                             store.dispatch('login');
-                            store.dispatch('getConfig');
+                            store.dispatch('getConfig')
+                                .then(() => this.$emit('loaded'));
                         }, 1000);
                     }
+
+                    this.$once('loaded', () => {
+                        this.globalLoading = false;
+                    });
                 },
                 // Make auth and config accessible to all components
                 computed: store.mapState(['auth', 'config'])
-            })
+            });
+
             window.routes = [];
             if ('${bool(app.DEVELOPER)}' === 'True') {
                 Vue.config.devtools = true;

diff --git a/themes-default/slim/views/snatchSelection.mako b/themes-default/slim/views/snatchSelection.mako
@@ -14,6 +14,14 @@ const startVue = () => {
         el: '#vue-wrap',
         data() {
             return {};
+        },
+        mounted() {
+            // Adjust the summary background position and size on page load and resize
+            this.$once('loaded', () => {
+                this.$nextTick(() => {
+                    window.dispatchEvent(new Event('resize'));
+                });
+            });
         }
     });
 };

diff --git a/themes/dark/templates/displayShow.mako b/themes/dark/templates/displayShow.mako
@@ -28,6 +28,14 @@ const startVue = () => {
             const { $store } = this;
             $store.dispatch('getShows'); // Used by show-selector component
         },
+        mounted() {
+            // Adjust the summary background position and size on page load and resize
+            this.$once('loaded', () => {
+                this.$nextTick(() => {
+                    window.dispatchEvent(new Event('resize'));
+                });
+            });
+        }
     });
 };
 </script>

diff --git a/themes/dark/templates/layouts/main.mako b/themes/dark/templates/layouts/main.mako
@@ -62,7 +62,12 @@
             % endif
             <%include file="/partials/alerts.mako"/>
                <div id="content-row" class="row">
-                    <div id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
+                    <div v-if="globalLoading" class="text-center ${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
+                        <h3>Loading....</h3>
+                        If this is taking too long,<br>
+                        <i style="cursor: pointer;" @click="globalLoading = false;">click here</i> to show the page.
+                    </div>
+                    <div :style="globalLoading ? { opacity: '0 !important' } : undefined" id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
                         <%block name="content" />
                     </div>
                </div><!-- /content -->
@@ -164,20 +169,31 @@
 
             // @TODO: Remove this before v1.0.0
             Vue.mixin({
+                data() {
+                    return {
+                        globalLoading: true
+                    };
+                },
                 mounted() {
                     if (this.$root === this && !document.location.pathname.endsWith('/login/')) {
                         // We wait 1000ms to allow the mutations to show in vue dev-tools
                         // Please see https://github.com/egoist/puex/issues/8
                         setTimeout(() => {
                             const { store } = window;
                             store.dispatch('login');
-                            store.dispatch('getConfig');
+                            store.dispatch('getConfig')
+                                .then(() => this.$emit('loaded'));
                         }, 1000);
                     }
+
+                    this.$once('loaded', () => {
+                        this.globalLoading = false;
+                    });
                 },
                 // Make auth and config accessible to all components
                 computed: store.mapState(['auth', 'config'])
-            })
+            });
+
             window.routes = [];
             if ('${bool(app.DEVELOPER)}' === 'True') {
                 Vue.config.devtools = true;

diff --git a/themes/dark/templates/snatchSelection.mako b/themes/dark/templates/snatchSelection.mako
@@ -14,6 +14,14 @@ const startVue = () => {
         el: '#vue-wrap',
         data() {
             return {};
+        },
+        mounted() {
+            // Adjust the summary background position and size on page load and resize
+            this.$once('loaded', () => {
+                this.$nextTick(() => {
+                    window.dispatchEvent(new Event('resize'));
+                });
+            });
         }
     });
 };

diff --git a/themes/light/templates/displayShow.mako b/themes/light/templates/displayShow.mako
@@ -28,6 +28,14 @@ const startVue = () => {
             const { $store } = this;
             $store.dispatch('getShows'); // Used by show-selector component
         },
+        mounted() {
+            // Adjust the summary background position and size on page load and resize
+            this.$once('loaded', () => {
+                this.$nextTick(() => {
+                    window.dispatchEvent(new Event('resize'));
+                });
+            });
+        }
     });
 };
 </script>

diff --git a/themes/light/templates/layouts/main.mako b/themes/light/templates/layouts/main.mako
@@ -62,7 +62,12 @@
             % endif
             <%include file="/partials/alerts.mako"/>
                <div id="content-row" class="row">
-                    <div id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
+                    <div v-if="globalLoading" class="text-center ${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
+                        <h3>Loading....</h3>
+                        If this is taking too long,<br>
+                        <i style="cursor: pointer;" @click="globalLoading = false;">click here</i> to show the page.
+                    </div>
+                    <div :style="globalLoading ? { opacity: '0 !important' } : undefined" id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12">
                         <%block name="content" />
                     </div>
                </div><!-- /content -->
@@ -164,20 +169,31 @@
 
             // @TODO: Remove this before v1.0.0
             Vue.mixin({
+                data() {
+                    return {
+                        globalLoading: true
+                    };
+                },
                 mounted() {
                     if (this.$root === this && !document.location.pathname.endsWith('/login/')) {
                         // We wait 1000ms to allow the mutations to show in vue dev-tools
                         // Please see https://github.com/egoist/puex/issues/8
                         setTimeout(() => {
                             const { store } = window;
                             store.dispatch('login');
-                            store.dispatch('getConfig');
+                            store.dispatch('getConfig')
+                                .then(() => this.$emit('loaded'));
                         }, 1000);
                     }
+
+                    this.$once('loaded', () => {
+                        this.globalLoading = false;
+                    });
                 },
                 // Make auth and config accessible to all components
                 computed: store.mapState(['auth', 'config'])
-            })
+            });
+
             window.routes = [];
             if ('${bool(app.DEVELOPER)}' === 'True') {
                 Vue.config.devtools = true;

diff --git a/themes/light/templates/snatchSelection.mako b/themes/light/templates/snatchSelection.mako
@@ -14,6 +14,14 @@ const startVue = () => {
         el: '#vue-wrap',
         data() {
             return {};
+        },
+        mounted() {
+            // Adjust the summary background position and size on page load and resize
+            this.$once('loaded', () => {
+                this.$nextTick(() => {
+                    window.dispatchEvent(new Event('resize'));
+                });
+            });
         }
     });
 };