Performance of frame changing has been increased due to UI containers had detached from DOM before their items were created

cvat/apps/engine/static/engine/base.css

@@ -98,8 +98,9 @@ html {
     border: none;
     outline: none;
     cursor: pointer;
-    padding: 14px 16px;
+    padding: 3px 0px;
     transition: 0.3s;
+
 }
 
 .tab button:hover {

cvat/apps/engine/static/engine/js/shapeCollection.js

@@ -1247,8 +1247,17 @@ class ShapeCollectionView {
             view.erase();
         }
 
-        this._currentViews = [];
+        // Save parents and detach elements from DOM
+        // in order to increase performance in the buildShapeView function
+        let parents = {
+            uis: this._UIContent.parent(),
+            shapes: this._frameContent.node.parentNode
+        }
+
+        this._frameContent.node.parent = null;
+        this._UIContent.detach();
 
+        this._currentViews = [];
         for (let shape of collection.currentShapes) {
             let model = shape.model;
             let view = buildShapeView(model, buildShapeController(model), this._frameContent, this._UIContent);
@@ -1259,6 +1268,10 @@ class ShapeCollectionView {
             view.subscribe(this);
             this._labelsContent.find(`.labelContentElement[label_id="${model.label}"]`).removeClass('hidden');
         }
+
+        parents.shapes.append(this._frameContent.node);
+        parents.uis.prepend(this._UIContent);
+
         ShapeCollectionView.sortByZOrder();
     }
 

cvat/apps/engine/static/engine/stylesheet.css

@@ -356,6 +356,9 @@
 .customizedTab {
     border-radius: 5px 5px 0px 0px;
     width: 100%;
+    width: 15%;
+    float: left;
+    margin: 0px 10px;
 }
 
 /* ----------------------- IDs ----------------------- */
@@ -392,7 +395,9 @@
 }
 
 #uiContent, #trackManagement, #aamMenu, #labelsContent {
-    border: 1px black solid;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+    border-left: 1px solid black;
     border-radius: 5px;
     box-shadow: 0 0 5px rgba(0,0,0,0.5);
     background-color: #B0C4DE;

cvat/apps/engine/templates/engine/annotation.html

@@ -375,11 +375,12 @@
     </div>
 </div>
 
+
+<div class="tab customizedTab">
+    <button class="h2 regular activeTabButton" id="sidePanelObjectsButton" style="width: 50%">Objects</button>
+    <button class="h2 regular" id="sidePanelLabelsButton" style="width: 50%">Labels</button>
+</div>
 <div id="taskAnnotationRightPanel">
-    <div class="tab customizedTab">
-        <button class="h2 regular activeTabButton" id="sidePanelObjectsButton" style="width: 50%">Objects</button>
-        <button class="h2 regular" id="sidePanelLabelsButton" style="width: 50%">Labels</button>
-    </div>
     <div id="uiContent"> </div>
     <div id="labelsContent" class="hidden"> </div>
     <div id="trackManagement">