From aa96140e7f783ad6cd50057c9f832c7452998205 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 13 Mar 2024 15:23:02 +0300
Subject: [PATCH] widgets loading state

---
 src/components/pages/Swap/Widget/Form.vue   |  2 +-
 src/components/shared/Widget/Base.vue       | 14 +++++++++++---
 src/components/shared/Widget/Grid/Grid.vue  |  7 +++++--
 src/components/shared/Widget/PriceChart.vue |  2 +-
 src/views/Swap.vue                          | 15 +++++----------
 5 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/Swap/Widget/Form.vue b/src/components/pages/Swap/Widget/Form.vue
index 0dcc6f82d..71b8be764 100644
--- a/src/components/pages/Swap/Widget/Form.vue
+++ b/src/components/pages/Swap/Widget/Form.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget class="swap-widget" :title="t('exchange.Swap')" v-loading="parentLoading" v-bind="$attrs">
+  <base-widget class="swap-widget" :title="t('exchange.Swap')" v-bind="$attrs">
     <template #filters>
       <swap-status-action-badge>
         <template #label>{{ t('marketText') }}:</template>
diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
index 7ce967af7..0bb9637e5 100644
--- a/src/components/shared/Widget/Base.vue
+++ b/src/components/shared/Widget/Base.vue
@@ -6,6 +6,7 @@
     size="big"
     primary
     :class="['base-widget', { delimeter, full }]"
+    v-loading="loading"
   >
     <template #header v-if="hasHeader">
       <div class="base-widget-block base-widget-header">
@@ -41,6 +42,10 @@ import { debouncedInputHandler } from '@/utils';
 
 @Component
 export default class BaseWidget extends Vue {
+  /**
+   * The widget title has a large font-size
+   */
+  @Prop({ default: false, type: Boolean }) readonly primaryTitle!: boolean;
   /**
    * The widget title text
    */
@@ -62,9 +67,9 @@ export default class BaseWidget extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
   /**
-   * The widget title has a large font-size
+   * Widget has a loading state
    */
-  @Prop({ default: false, type: Boolean }) readonly primaryTitle!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
 
   @Prop({ default: () => {}, type: Function }) readonly onResize!: (rect: DOMRect) => void;
 
@@ -134,9 +139,12 @@ $left: $inner-spacing-medium;
   display: flex;
   flex-flow: column nowrap;
   align-items: normal;
-  overflow: unset;
+  overflow: hidden;
 
   &.full {
+    width: 100%;
+    height: 100%;
+
     flex: 1;
   }
 
diff --git a/src/components/shared/Widget/Grid/Grid.vue b/src/components/shared/Widget/Grid/Grid.vue
index 93f70a739..219f0cb14 100644
--- a/src/components/shared/Widget/Grid/Grid.vue
+++ b/src/components/shared/Widget/Grid/Grid.vue
@@ -9,9 +9,9 @@
     :is-resizable="resizable"
     :margin="[margin, margin]"
     :responsive="true"
-    :prevent-collision="true"
+    :prevent-collision="false"
     :vertical-compact="compact"
-    :use-css-transforms="false"
+    :use-css-transforms="true"
     @layout-ready="onReady"
     @breakpoint-changed="onBreakpointChanged"
   >
@@ -20,6 +20,8 @@
         v-if="ready"
         :name="widget.i"
         v-bind="{
+          id: widget.i,
+          loading,
           onResize: ($event) => onWidgetResize($event, widget.i),
         }"
       />
@@ -65,6 +67,7 @@ export default class WidgetsGrid extends Vue {
   @Prop({ default: false, type: Boolean }) readonly draggable!: boolean;
   @Prop({ default: false, type: Boolean }) readonly resizable!: boolean;
   @Prop({ default: false, type: Boolean }) readonly compact!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
   @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: LayoutConfig;
   @Prop({ default: () => DEFAULT_BREAKPOINTS, type: Object }) readonly breakpoints!: LayoutConfig;
 
diff --git a/src/components/shared/Widget/PriceChart.vue b/src/components/shared/Widget/PriceChart.vue
index b73c41a06..dc5f2c202 100644
--- a/src/components/shared/Widget/PriceChart.vue
+++ b/src/components/shared/Widget/PriceChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget full v-loading="parentLoading">
+  <base-widget v-bind="$attrs">
     <template #title>
       <tokens-row border :assets="tokens" size="medium" />
       <div v-if="tokenA" class="token-title">
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
index 22209f1ce..29ba5d6dc 100644
--- a/src/views/Swap.vue
+++ b/src/views/Swap.vue
@@ -17,25 +17,20 @@
       :resizable="resizable"
       :compact="compact"
       :layouts="layouts"
+      :loading="parentLoading"
       class="swap-container"
     >
       <template v-slot:[SwapWidgets.Form]="props">
-        <swap-form-widget :id="SwapWidgets.Form" v-bind="props" primary-title :parent-loading="parentLoading" />
+        <swap-form-widget v-bind="props" primary-title />
       </template>
       <template v-slot:[SwapWidgets.Chart]="props">
-        <swap-chart-widget :id="SwapWidgets.Chart" v-bind="props" full :parent-loading="parentLoading" />
+        <swap-chart-widget v-bind="props" full />
       </template>
       <template v-slot:[SwapWidgets.Distribution]="props">
-        <swap-distribution-widget :id="SwapWidgets.Distribution" v-bind="props" :parent-loading="parentLoading" />
+        <swap-distribution-widget v-bind="props" />
       </template>
       <template v-slot:[SwapWidgets.Transactions]="props">
-        <swap-transactions-widget
-          :id="SwapWidgets.Transactions"
-          v-bind="props"
-          full
-          extensive
-          :parent-loading="parentLoading"
-        />
+        <swap-transactions-widget v-bind="props" full extensive />
       </template>
     </widgets-grid>
   </div>