From 31b4cb526449692ea5bd5ff2c716b38624e7db36 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Sat, 7 Jul 2018 21:13:10 +0300
Subject: [PATCH 1/4] Soft "Loading..." mask

---
 themes-default/slim/views/layouts/main.mako | 20 ++++++++++++++++++--
 themes/dark/templates/layouts/main.mako     | 20 ++++++++++++++++++--
 themes/light/templates/layouts/main.mako    | 20 ++++++++++++++++++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/themes-default/slim/views/layouts/main.mako b/themes-default/slim/views/layouts/main.mako
index a9fef4b89f..4d8c7035f6 100644
--- 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,6 +169,11 @@
 
             // @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
@@ -172,12 +182,18 @@
                             const { store } = window;
                             store.dispatch('login');
                             store.dispatch('getConfig');
+                            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/layouts/main.mako b/themes/dark/templates/layouts/main.mako
index a9fef4b89f..4d8c7035f6 100644
--- 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,6 +169,11 @@
 
             // @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
@@ -172,12 +182,18 @@
                             const { store } = window;
                             store.dispatch('login');
                             store.dispatch('getConfig');
+                            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/layouts/main.mako b/themes/light/templates/layouts/main.mako
index a9fef4b89f..4d8c7035f6 100644
--- 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,6 +169,11 @@
 
             // @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
@@ -172,12 +182,18 @@
                             const { store } = window;
                             store.dispatch('login');
                             store.dispatch('getConfig');
+                            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;

From 0869407c9b37d591e13f3ef73f7ec119fe6105c5 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Sat, 7 Jul 2018 21:19:55 +0300
Subject: [PATCH 2/4] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2a4cb8014..f10fc1de26 100644
--- 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**

From 8a1f3822231a409bb9c999c08917a80e01dea8f7 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Sat, 7 Jul 2018 21:43:33 +0300
Subject: [PATCH 3/4] Emit the event after 'getConfig'

---
 themes-default/slim/views/layouts/main.mako | 4 ++--
 themes/dark/templates/layouts/main.mako     | 4 ++--
 themes/light/templates/layouts/main.mako    | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/themes-default/slim/views/layouts/main.mako b/themes-default/slim/views/layouts/main.mako
index 4d8c7035f6..c6efe06b13 100644
--- a/themes-default/slim/views/layouts/main.mako
+++ b/themes-default/slim/views/layouts/main.mako
@@ -181,8 +181,8 @@
                         setTimeout(() => {
                             const { store } = window;
                             store.dispatch('login');
-                            store.dispatch('getConfig');
-                            this.$emit('loaded');
+                            store.dispatch('getConfig')
+                                .then(() => this.$emit('loaded'));
                         }, 1000);
                     }
 
diff --git a/themes/dark/templates/layouts/main.mako b/themes/dark/templates/layouts/main.mako
index 4d8c7035f6..c6efe06b13 100644
--- a/themes/dark/templates/layouts/main.mako
+++ b/themes/dark/templates/layouts/main.mako
@@ -181,8 +181,8 @@
                         setTimeout(() => {
                             const { store } = window;
                             store.dispatch('login');
-                            store.dispatch('getConfig');
-                            this.$emit('loaded');
+                            store.dispatch('getConfig')
+                                .then(() => this.$emit('loaded'));
                         }, 1000);
                     }
 
diff --git a/themes/light/templates/layouts/main.mako b/themes/light/templates/layouts/main.mako
index 4d8c7035f6..c6efe06b13 100644
--- a/themes/light/templates/layouts/main.mako
+++ b/themes/light/templates/layouts/main.mako
@@ -181,8 +181,8 @@
                         setTimeout(() => {
                             const { store } = window;
                             store.dispatch('login');
-                            store.dispatch('getConfig');
-                            this.$emit('loaded');
+                            store.dispatch('getConfig')
+                                .then(() => this.$emit('loaded'));
                         }, 1000);
                     }
 

From 9bf81c845060acbdac8b1ec0fd5e82640931a1c4 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Sat, 7 Jul 2018 23:04:23 +0300
Subject: [PATCH 4/4] Fix summaryBackground location

---
 themes-default/slim/views/displayShow.mako     | 8 ++++++++
 themes-default/slim/views/snatchSelection.mako | 8 ++++++++
 themes/dark/templates/displayShow.mako         | 8 ++++++++
 themes/dark/templates/snatchSelection.mako     | 8 ++++++++
 themes/light/templates/displayShow.mako        | 8 ++++++++
 themes/light/templates/snatchSelection.mako    | 8 ++++++++
 6 files changed, 48 insertions(+)

diff --git a/themes-default/slim/views/displayShow.mako b/themes-default/slim/views/displayShow.mako
index 79a8e093a8..fe1b1808d9 100644
--- 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/snatchSelection.mako b/themes-default/slim/views/snatchSelection.mako
index 8232452924..32db0e3795 100644
--- 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
index 79a8e093a8..fe1b1808d9 100644
--- 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/snatchSelection.mako b/themes/dark/templates/snatchSelection.mako
index 8232452924..32db0e3795 100644
--- 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
index 79a8e093a8..fe1b1808d9 100644
--- 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/snatchSelection.mako b/themes/light/templates/snatchSelection.mako
index 8232452924..32db0e3795 100644
--- 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'));
+                });
+            });
         }
     });
 };