widgets loading state

sora-xor · Mar 13, 2024 · aa96140 · aa96140
1 parent f03dd76
commit aa96140
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>