From 01cd0862d301cfff434bfc3e638923fac46f9a50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Wed, 7 Jun 2023 12:06:14 +0200
Subject: [PATCH] Improve modal performance by adding no-fade

---
 client/web/compose/src/components/PageBlocks/TabsBase.vue   | 1 +
 .../compose/src/components/PageBlocks/TabsConfigurator.vue  | 1 +
 .../web/compose/src/components/Public/Page/Block/Modal.vue  | 5 +++--
 .../compose/src/components/Public/Record/BulkEdit/index.vue | 1 +
 .../compose/src/components/Public/Record/Exporter/index.vue | 1 +
 .../compose/src/components/Public/Record/Importer/index.vue | 1 +
 client/web/compose/src/components/Public/Record/Modal.vue   | 3 ++-
 .../compose/src/components/Translator/CTranslatorModal.vue  | 1 +
 client/web/compose/src/views/Admin/Modules/Edit.vue         | 1 +
 client/web/compose/src/views/Admin/Pages/Builder.vue        | 3 +++
 client/web/compose/src/views/Admin/Pages/Edit.vue           | 3 +++
 client/web/compose/src/views/Namespace/Edit.vue             | 2 ++
 client/web/reporter/src/views/Report/Builder.vue            | 5 +++++
 client/web/workflow/src/components/Configurator/Error.vue   | 1 +
 .../workflow/src/components/Configurator/Expressions.vue    | 1 +
 .../web/workflow/src/components/Configurator/Function.vue   | 1 +
 client/web/workflow/src/components/Import.vue               | 1 +
 client/web/workflow/src/components/WorkflowEditor.vue       | 4 ++++
 lib/vue/src/components/Tour/TourStart.vue                   | 1 +
 lib/vue/src/components/input/CInputColorPicker.vue          | 1 +
 lib/vue/src/components/permissions/CPermissionsModal.vue    | 6 ++++--
 lib/vue/src/components/prompts/CPromptModal.vue             | 2 +-
 22 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/TabsBase.vue b/client/web/compose/src/components/PageBlocks/TabsBase.vue
index c7202ee9b..f60209206 100644
--- a/client/web/compose/src/components/PageBlocks/TabsBase.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsBase.vue
@@ -28,6 +28,7 @@
         vertical: block.options.style.orientation === 'vertical',
         end: block.options.style.position === 'end'
       }"
+      no-fade
       class="h-100"
       :class="{ 'd-flex flex-column': block.options.style.orientation !== 'vertical' }"
     >
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index f9af94b69..01e9fcdde 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -230,6 +230,7 @@
       size="lg"
       scrollable
       hide-footer
+      no-fade
       :title="$t('tabs.newBlockModal')"
     >
       <new-block-selector
diff --git a/client/web/compose/src/components/Public/Page/Block/Modal.vue b/client/web/compose/src/components/Public/Page/Block/Modal.vue
index e9abb0d45..7641b922d 100644
--- a/client/web/compose/src/components/Public/Page/Block/Modal.vue
+++ b/client/web/compose/src/components/Public/Page/Block/Modal.vue
@@ -9,6 +9,7 @@
     hide-header
     hide-footer
     size="xl"
+    no-fade
     @hidden="hideModal"
   >
     <page-block
@@ -50,6 +51,7 @@ export default {
   data () {
     return {
       showModal: false,
+
       block: undefined,
       record: undefined,
       page: undefined,
@@ -132,6 +134,7 @@ export default {
       const recordID = paramsRecordID || queryRecordID
       this.block = this.customBlock || this.page.blocks.find(block => block.blockID === blockID)
       this.module = moduleID !== NoID ? this.getModuleByID(moduleID) : undefined
+      this.showModal = !!(this.block || {}).blockID
 
       if (recordID) {
         this.$ComposeAPI
@@ -143,8 +146,6 @@ export default {
       } else if (this.module) {
         this.record = new compose.Record(this.module, {})
       }
-
-      this.showModal = !!(this.block || {}).blockID
     },
 
     hideModal () {
diff --git a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
index 548a174d3..201c90757 100644
--- a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
+++ b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
@@ -19,6 +19,7 @@
       body-class="p-0"
       footer-class="flex-column align-items-stretch"
       centered
+      no-fade
       @hide="onModalHide"
     >
       <b-card
diff --git a/client/web/compose/src/components/Public/Record/Exporter/index.vue b/client/web/compose/src/components/Public/Record/Exporter/index.vue
index 78dce15ea..590e09cdf 100644
--- a/client/web/compose/src/components/Public/Record/Exporter/index.vue
+++ b/client/web/compose/src/components/Public/Record/Exporter/index.vue
@@ -13,6 +13,7 @@
       :title="$t('label.export')"
       hide-footer
       body-class="p-0"
+      no-fade
       @hide="toggleModal"
     >
       <configurator
diff --git a/client/web/compose/src/components/Public/Record/Importer/index.vue b/client/web/compose/src/components/Public/Record/Importer/index.vue
index 026afb795..0990da214 100644
--- a/client/web/compose/src/components/Public/Record/Importer/index.vue
+++ b/client/web/compose/src/components/Public/Record/Importer/index.vue
@@ -14,6 +14,7 @@
       :title="$t('recordList.import.to', { modulename: module.name })"
       hide-footer
       body-class="p-0"
+      no-fade
       @hide="onModalHide"
     >
       <keep-alive>
diff --git a/client/web/compose/src/components/Public/Record/Modal.vue b/client/web/compose/src/components/Public/Record/Modal.vue
index 9c6b16d87..aa81997fb 100644
--- a/client/web/compose/src/components/Public/Record/Modal.vue
+++ b/client/web/compose/src/components/Public/Record/Modal.vue
@@ -4,10 +4,11 @@
     v-model="showModal"
     scrollable
     dialog-class="h-100 mw-90"
-    content-class="position-initial"
+    content-class="card position-initial"
     body-class="p-0 bg-gray"
     footer-class="p-0"
     size="xl"
+    no-fade
     @hidden="hideModal"
   >
     <template #modal-title>
diff --git a/client/web/compose/src/components/Translator/CTranslatorModal.vue b/client/web/compose/src/components/Translator/CTranslatorModal.vue
index 1620cf7b7..9a3089d63 100644
--- a/client/web/compose/src/components/Translator/CTranslatorModal.vue
+++ b/client/web/compose/src/components/Translator/CTranslatorModal.vue
@@ -6,6 +6,7 @@
       lazy
       scrollable
       :title="title"
+      no-fade
       @hide="onHide"
     >
       <c-translator-form
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index 5ce2c8e53..da5baf712 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -407,6 +407,7 @@
         :visible="!!updateField"
         body-class="p-0 border-top-0"
         header-class="p-3 pb-0 border-bottom-0"
+        no-fade
         @ok="handleFieldSave(updateField)"
         @hide="updateField=null"
       >
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 51c1194e7..94f57b9a2 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -155,6 +155,7 @@
       size="lg"
       scrollable
       :title="$t('build.selectBlockTitle')"
+      no-fade
       body-class="vh-75"
     >
       <new-block-selector
@@ -178,6 +179,7 @@
       :visible="showCreator"
       body-class="p-0 border-top-0"
       header-class="p-3 pb-0 border-bottom-0"
+      no-fade
       @ok="updateBlocks()"
       @hide="editor = undefined"
     >
@@ -199,6 +201,7 @@
       body-class="p-0 border-top-0"
       footer-class="d-flex justify-content-between"
       header-class="p-3 pb-0 border-bottom-0"
+      no-fade
       @hide="editor = undefined"
     >
       <configurator
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 0926874a6..c549b9d89 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -383,6 +383,7 @@
       cancel-variant="link"
       size="xl"
       scrollable
+      no-fade
       @ok="updateLayout()"
       @cancel="layoutEditor.layout = undefined"
       @hide="layoutEditor.layout = undefined"
@@ -623,6 +624,7 @@
       size="lg"
       label-class="text-primary"
       cancel-variant="link"
+      no-fade
       @close="closeIconModal"
       @ok="saveIconModal"
     >
@@ -703,6 +705,7 @@
       hide-header
       hide-footer
       centered
+      no-fade
       body-class="p-1"
     >
       <b-img
diff --git a/client/web/compose/src/views/Namespace/Edit.vue b/client/web/compose/src/views/Namespace/Edit.vue
index b34a21bd7..52cfa25c1 100644
--- a/client/web/compose/src/views/Namespace/Edit.vue
+++ b/client/web/compose/src/views/Namespace/Edit.vue
@@ -291,6 +291,7 @@
       hide-header
       hide-footer
       centered
+      no-fade
       body-class="p-1"
     >
       <b-img
@@ -305,6 +306,7 @@
       hide-header
       hide-footer
       centered
+      no-fade
       body-class="p-1"
     >
       <b-img
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index f49a53912..efd30684d 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -149,6 +149,7 @@
       size="xl"
       body-class="p-0 border-top-0"
       header-class="pb-0 px-3 pt-3 border-bottom-0"
+      no-fade
       @ok="updateBlock()"
     >
       <b-tabs
@@ -240,6 +241,7 @@
       scrollable
       size="xl"
       body-class="py-3"
+      no-fade
       @ok="saveDatasources"
     >
       <configurator
@@ -279,6 +281,7 @@
       hide-footer
       :title="$t('builder:add.display-element')"
       body-class="px-0 py-3"
+      no-fade
     >
       <selector
         :items="displayElements.types"
@@ -293,6 +296,7 @@
       hide-footer
       :title="$t('builder:add.datasource')"
       body-class="px-0 py-3"
+      no-fade
     >
       <selector
         :items="datasources.types"
@@ -309,6 +313,7 @@
       ok-variant="primary"
       :title="$t('builder:scenarios.label')"
       body-class="py-3"
+      no-fade
     >
       <configurator
         v-if="report"
diff --git a/client/web/workflow/src/components/Configurator/Error.vue b/client/web/workflow/src/components/Configurator/Error.vue
index 8cb969de9..f7d9f462b 100644
--- a/client/web/workflow/src/components/Configurator/Error.vue
+++ b/client/web/workflow/src/components/Configurator/Error.vue
@@ -40,6 +40,7 @@
       :ok-title="$t('general:save')"
       :cancel-title="$t('general:cancel')"
       body-class="p-0"
+      no-fade
       @ok="saveExpression"
       @hidden="resetExpression"
     >
diff --git a/client/web/workflow/src/components/Configurator/Expressions.vue b/client/web/workflow/src/components/Configurator/Expressions.vue
index 1c804e91a..585ed02ce 100644
--- a/client/web/workflow/src/components/Configurator/Expressions.vue
+++ b/client/web/workflow/src/components/Configurator/Expressions.vue
@@ -57,6 +57,7 @@
       :ok-title="$t('general:save')"
       :cancel-title="$t('general:cancel')"
       body-class="p-0"
+      no-fade
       @ok="saveExpression"
       @hidden="resetExpression"
     >
diff --git a/client/web/workflow/src/components/Configurator/Function.vue b/client/web/workflow/src/components/Configurator/Function.vue
index 243fac74f..d194dd020 100644
--- a/client/web/workflow/src/components/Configurator/Function.vue
+++ b/client/web/workflow/src/components/Configurator/Function.vue
@@ -305,6 +305,7 @@
       :ok-title="$t('general:save')"
       :cancel-title="$t('general:cancel')"
       body-class="p-0"
+      no-fade
       @ok="saveExpression"
       @hidden="resetExpression"
     >
diff --git a/client/web/workflow/src/components/Import.vue b/client/web/workflow/src/components/Import.vue
index aadccf594..26ceaf250 100644
--- a/client/web/workflow/src/components/Import.vue
+++ b/client/web/workflow/src/components/Import.vue
@@ -14,6 +14,7 @@
       size="lg"
       :title="$t('general:import.json')"
       ok-only
+      no-fade
       class="d-none"
       @ok="$emit('import', workflows)"
     >
diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue
index 64994bb67..e97e67055 100644
--- a/client/web/workflow/src/components/WorkflowEditor.vue
+++ b/client/web/workflow/src/components/WorkflowEditor.vue
@@ -311,6 +311,7 @@
       :hide-header-close="workflow.workflowID === '0'"
       :no-close-on-backdrop="workflow.workflowID === '0'"
       :no-close-on-esc="workflow.workflowID === '0'"
+      no-fade
     >
       <template #modal-title>
         {{ $t('editor:workflow-configuration') }}
@@ -401,6 +402,7 @@
       size="lg"
       scrollable
       hide-footer
+      no-fade
       body-class="p-0"
     >
       <help />
@@ -411,6 +413,7 @@
       v-model="issuesModal.show"
       :title="$t('editor:issues')"
       hide-footer
+      no-fade
     >
       <div
         v-for="(issue, index) in issuesModal.issues"
@@ -433,6 +436,7 @@
       :ok-title="`${dryRun.lookup ? this.$t('editor:load-and-configure') : this.$t('editor:run-workflow')}`"
       :cancel-title="$t('editor:back')"
       ok-variant="success"
+      no-fade
       @cancel.prevent="dryRun.lookup = true"
       @ok="dryRunOk"
     >
diff --git a/lib/vue/src/components/Tour/TourStart.vue b/lib/vue/src/components/Tour/TourStart.vue
index c7a61d145..028875adf 100644
--- a/lib/vue/src/components/Tour/TourStart.vue
+++ b/lib/vue/src/components/Tour/TourStart.vue
@@ -6,6 +6,7 @@
     :ok-title="$t('start.show')"
     :cancel-title="$t('start.skip')"
     body-class="p-0"
+    no-fade
     @ok="onSave"
     @cancel="onCancel"
   >
diff --git a/lib/vue/src/components/input/CInputColorPicker.vue b/lib/vue/src/components/input/CInputColorPicker.vue
index 7ec2d691a..2db238ba7 100644
--- a/lib/vue/src/components/input/CInputColorPicker.vue
+++ b/lib/vue/src/components/input/CInputColorPicker.vue
@@ -56,6 +56,7 @@
       size="sm"
       body-class="p-0"
       cancel-variant="link"
+      no-fade
       @ok="$emit('input', currentColor || value)"
       @hide="closeMenu"
     >
diff --git a/lib/vue/src/components/permissions/CPermissionsModal.vue b/lib/vue/src/components/permissions/CPermissionsModal.vue
index 1fbec300e..c1debfb22 100644
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -11,6 +11,7 @@
       :ok-title="labels.save"
       :cancel-title="labels.cancel"
       cancel-variant="light"
+      no-fade
       body-class="d-flex flex-column p-0"
       class="h-100 overflow-hidden"
       @hide="onHide"
@@ -173,6 +174,7 @@
       ok-only
       :ok-title="labels.add.save"
       :ok-disabled="!addEnabled"
+      no-fade
       @ok="onAddEval"
     >
       <b-form-group
@@ -343,13 +345,13 @@ export default {
         } else if (this.currentRole) {
           const { roleID } = this.currentRole
           this.processing = true
-  
+
           return this.fetchRules(roleID).then(() => {
             return Promise.all(this.evaluate.map(e => {
               const { userID } = e.userID || {}
               let { roleID = [] } = e
               roleID = roleID.map(({ roleID }) => roleID)
-    
+
               return this.evaluatePermissions({ roleID, userID }).then(rules => {
                 return {
                   ...e,
diff --git a/lib/vue/src/components/prompts/CPromptModal.vue b/lib/vue/src/components/prompts/CPromptModal.vue
index bbe0fdfa5..20912853d 100644
--- a/lib/vue/src/components/prompts/CPromptModal.vue
+++ b/lib/vue/src/components/prompts/CPromptModal.vue
@@ -6,7 +6,7 @@
     :hide-footer="!current"
     :title="current ? current.title : 'Workflow prompts'"
     :busy="isLoading"
-
+    no-fade
     @hide="deactivate()"
   >
     <component