1 files changed, 38 insertions, 56 deletions

diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
index 4d90b2853d..4af92eca24 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -11,72 +11,28 @@ export class LoaderComponent {
 
     @Input() display:boolean;
     @Input() size:string;// small || medium || large
-    @Input() elementSelector:string; // required if is relative true
-    @Input() relative:boolean;
-
-    interval;
+    @Input() relative: boolean;
+    @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
+    
 
     constructor (private el: ElementRef, private renderer: Renderer){
     }
 
     ngOnInit() {
-
-        if (this.elementSelector) {
-            let elemParent = angular.element(this.elementSelector);
-            let positionStyle:string = elemParent.css('position');
-            this.setStyle(positionStyle);
-        }
-
-        if (this.relative === true) {
-            let positionStyle:string = this.el.nativeElement.parentElement.style.position;
-            this.setStyle(positionStyle);
-        }
         if (!this.size) {
             this.size = 'large';
         }
-    }
-
-    ngOnDestroy(){
-        clearInterval(this.interval);
-    }
-
-    calculateSizesForFixPosition = (positionStyle:string):void => {
-        // This is problematic, I do not want to change the parent position.
-        // set the loader on all the screen
-        let parentLeft = this.el.nativeElement.parentElement.offsetLeft;
-        let parentTop = this.el.nativeElement.parentElement.offsetTop;
-        let parentWidth = this.el.nativeElement.parentElement.offsetWidth;
-        let parentHeight = this.el.nativeElement.parentElement.offsetHeight;
-        this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle);
-        this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop);
-        this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft);
-        this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth);
-        this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight);
-    };
-
-    setStyle = (positionStyle:string):void => {
-
-        switch (positionStyle) {
-            case 'absolute':
-            case 'fixed':
-                // The parent size is not set yet, still loading, so need to use interval to update the size.
-                this.interval = window.setInterval(()=> {
-                    this.calculateSizesForFixPosition(positionStyle);
-                }, 2000);
-                break;
-            default:
-                // Can change the parent position to relative without causing style issues.
-                this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative');
-                break;
+        if (this.display === true) {
+            this.changeLoaderDisplay(true);
         }
-    };
+    }
 
     ngOnChanges(changes: SimpleChanges) {
         if(changes.display){
-            this.changeLoaderDisplay(false);
-            if ( this.display ) {
-                window.setTimeout(():void => {
-                    this.changeLoaderDisplay(true);
+            if (this.display) {
+                this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
+                window.setTimeout((): void => {
+                    this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
                 }, 500);
             } else {
                 window.setTimeout(():void => {
@@ -86,7 +42,33 @@ export class LoaderComponent {
         }
     }
 
-    changeLoaderDisplay = (display:boolean):void => {
-        this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none');
+    changeLoaderDisplay = (display: boolean): void => {
+        if (display) {
+            this.calculateLoaderPosition();
+            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
+        } else {
+            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
+        }
+    }
+
+    calculateLoaderPosition = () => {
+        if (this.relative === true) { // Can change the parent position to relative without causing style issues.
+            let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
+            this.renderer.setElementStyle(parent, 'position', 'relative');
+            this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
+            //TODO: DONT force parent to have position relative; set inner div's style instead of outer element
+            // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
+            // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
+        } else {
+            this.setLoaderPosition(0, 0); //will appear over whole page
+        }
     }
+
+    setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
+        this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
+        this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
+        this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
+        this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
+        this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
+    };
 }