[IMP] survey: improve sessions fade in/out delays

PURPOSE

Improve the various sessions flow to make it easier for attendees to reach the
session and to allow better interactions between the host and his audience.

This comes with small usability improvements as well as increased
"beautifulness" by using custom layouts & animations.

SPECS

This commit changes the survey sessions fade in/out delay for both the host
and the attendees.

When going from one question to another, the total delay is now 1 second
(instead of 2 previously), with 500 ms for fade out and 500 ms for fade in.

The previous delay gave an impression of "slowness".

The delays and "server lag reduction" on the attendees side were adapted
accordingly.

LINKS

PR #46768
Task 2208574

2 files changed, 10 insertions, 10 deletions

diff --git a/addons/survey/static/src/js/survey_form.js b/addons/survey/static/src/js/survey_form.js
index c9e9d5942a3..9d83703610c 100644
--- a/addons/survey/static/src/js/survey_form.js
+++ b/addons/survey/static/src/js/survey_form.js
@@ -234,18 +234,18 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
      * If the trigger is 'next_question', we handle some extra computation to find
      * a suitable "fadeInOutDelay" based on the delay between the time of the question
      * change by the host and the time of reception of the event.
-     * This will allow us to account for a little bit of server lag (up to 2 seconds)
+     * This will allow us to account for a little bit of server lag (up to 1 second)
      * while giving everyone a fair experience on the quiz.
      *
      * e.g 1:
      * - The host switches the question
-     * - We receive the event 500 ms later due to server lag
-     * - -> The fadeInOutDelay will be 750 ms (500ms delay + 750ms * 2 fade in fade out)
+     * - We receive the event 200 ms later due to server lag
+     * - -> The fadeInOutDelay will be 400 ms (200ms delay + 400ms * 2 fade in fade out)
      *
      * e.g 2:
      * - The host switches the question
-     * - We receive the event 1500 ms later due to bigger server lag
-     * - -> The fadeInOutDelay will be 250ms (1500ms delay + 250ms * 2 fade in fade out)
+     * - We receive the event 600 ms later due to bigger server lag
+     * - -> The fadeInOutDelay will be 200ms (600ms delay + 200ms * 2 fade in fade out)
      *
      * @private
      * @param {Array[]} notifications structured as specified by the bus feature
@@ -275,10 +275,10 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
                 var serverDelayMS = moment.utc().valueOf() - moment.unix(nextPageEvent.question_start).utc().valueOf();
                 if (serverDelayMS < 0) {
                     serverDelayMS = 0;
-                } else if (serverDelayMS > 2000) {
-                    serverDelayMS = 2000;
+                } else if (serverDelayMS > 1000) {
+                    serverDelayMS = 1000;
                 }
-                this.fadeInOutDelay = (2000 - serverDelayMS) / 2;
+                this.fadeInOutDelay = (1000 - serverDelayMS) / 2;
             } else {
                 this.fadeInOutDelay = 400;
             }
diff --git a/addons/survey/static/src/js/survey_session_manage.js b/addons/survey/static/src/js/survey_session_manage.js
index 4a1fdf13798..1a83175e79e 100644
--- a/addons/survey/static/src/js/survey_session_manage.js
+++ b/addons/survey/static/src/js/survey_session_manage.js
@@ -304,7 +304,7 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
 
         var resolveFadeOut;
         var fadeOutPromise = new Promise(function (resolve, reject) { resolveFadeOut = resolve; });
-        this.$el.fadeOut(1000, function () {
+        this.$el.fadeOut(500, function () {
             resolveFadeOut();
         });
 
@@ -323,7 +323,7 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
                 var $renderedTemplate = $(results[1]);
                 self.$el.replaceWith($renderedTemplate);
                 self.attachTo($renderedTemplate);
-                self.$el.fadeIn(1000, function () {
+                self.$el.fadeIn(500, function () {
                     self._startTimer();
                 });
             } else {