1 files changed, 24 insertions, 23 deletions

diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 2fd062a88..b90ff5eaf 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -44,18 +44,19 @@ export class Track extends React.Component<IProps> {
         return NumCast(RegionHelpers.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement));
     }
 
-    async componentDidMount() {
-        const regions = await DocListCastAsync(this.props.animatedDoc.regions);
-        if (!regions) this.props.animatedDoc.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff
-        //these two lines are exactly same from timeline.tsx
-        const relativeHeight = window.innerHeight / 20;
-        runInAction(() => (this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT)); //for responsiveness
-        this._timelineVisibleReaction = this.timelineVisibleReaction();
-        this._currentBarXReaction = this.currentBarXReaction();
-        if (DocListCast(this.props.animatedDoc.regions).length === 0) this.createRegion(this.time);
-        this.props.animatedDoc.hidden = false;
-        this.props.animatedDoc.opacity = 1;
-        // this.autoCreateKeyframe();
+    componentDidMount() {
+        DocListCastAsync(this.props.animatedDoc.regions).then(regions => {
+            if (!regions) this.props.animatedDoc.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff
+            //these two lines are exactly same from timeline.tsx
+            const relativeHeight = window.innerHeight / 20;
+            runInAction(() => (this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT)); //for responsiveness
+            this._timelineVisibleReaction = this.timelineVisibleReaction();
+            this._currentBarXReaction = this.currentBarXReaction();
+            if (DocListCast(this.props.animatedDoc.regions).length === 0) this.createRegion(this.time);
+            this.props.animatedDoc.hidden = false;
+            this.props.animatedDoc.opacity = 1;
+            // this.autoCreateKeyframe();
+        });
     }
 
     /**
@@ -86,7 +87,7 @@ export class Track extends React.Component<IProps> {
      *
      */
     @action
-    saveKeyframe = async () => {
+    saveKeyframe = () => {
         if (this.props.timeline.IsPlaying || !this.saveStateRegion || !this.saveStateKf) {
             this.saveStateKf = undefined;
             this.saveStateRegion = undefined;
@@ -223,23 +224,23 @@ export class Track extends React.Component<IProps> {
      * when scrubber position changes. Need to edit the logic
      */
     @action
-    timeChange = async () => {
+    timeChange = () => {
         if (this.saveStateKf !== undefined || this._newKeyframe) {
-            await this.saveKeyframe();
+            this.saveKeyframe();
         }
-        const regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
+        const regiondata = this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
         if (regiondata) {
-            const leftkf: Doc | undefined = await RegionHelpers.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists
-            const rightkf: Doc | undefined = await RegionHelpers.calcMinRight(regiondata, this.time); //right keyframe, if it exists
-            const currentkf: Doc | undefined = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
+            const leftkf: Doc | undefined = RegionHelpers.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists
+            const rightkf: Doc | undefined = RegionHelpers.calcMinRight(regiondata, this.time); //right keyframe, if it exists
+            const currentkf: Doc | undefined = this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
             if (currentkf) {
-                await this.applyKeys(currentkf);
+                this.applyKeys(currentkf);
                 runInAction(() => {
                     this.saveStateKf = currentkf;
                     this.saveStateRegion = regiondata;
                 });
             } else if (leftkf && rightkf) {
-                await this.interpolate(leftkf, rightkf);
+                this.interpolate(leftkf, rightkf);
             }
         }
     };
@@ -249,7 +250,7 @@ export class Track extends React.Component<IProps> {
      * need to change the logic here
      */
     @action
-    private applyKeys = async (kf: Doc) => {
+    private applyKeys = (kf: Doc) => {
         this.primitiveWhitelist.forEach(key => {
             if (!kf[key]) {
                 this.props.animatedDoc[key] = undefined;
@@ -277,7 +278,7 @@ export class Track extends React.Component<IProps> {
      * basic linear interpolation function
      */
     @action
-    interpolate = async (left: Doc, right: Doc) => {
+    interpolate = (left: Doc, right: Doc) => {
         this.primitiveWhitelist.forEach(key => {
             if (typeof left[key] === 'number' && typeof right[key] === 'number') {
                 //if it is number, interpolate