fix: sync shaded area with current spot barrier (#1482)

Author: akmal-deriv

Diff for: sass/components/_barrier.scss

@@ -205,7 +205,6 @@
     right: 0;
     height: 120px !important;
     opacity: 0.3;
-    transition: all 0.1s ease-out;
 }
 
 /* css gradients are only partially supported in Safari, but will work here since colors are not premultiplied */

Diff for: src/store/BarrierStore.ts

@@ -113,6 +113,8 @@ export default class BarrierStore {
             () => [this.mainStore.chartAdapter.epochBounds, this.mainStore.chartAdapter.quoteBounds],
             this._drawShadedArea
         );
+
+        this.mainStore.chartAdapter.painter.registerCallback(this._drawShadedArea);
     };
 
     init(): void {
@@ -195,6 +197,9 @@ export default class BarrierStore {
 
         this.disposeDrawReaction?.();
 
+        this.mainStore.chartAdapter.painter.unregisterCallback(this._drawShadedArea);
+
+
         const i = this.mainStore.chart._barriers.findIndex((b: BarrierStore) => b === this);
         if (i !== -1) {
             this.mainStore.chart._barriers.splice(i, 1);