Changed stuff for performance optimization

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnedia/ngx-globe",
   "description": "A simple component library to create a container with an animated and interactive globe.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0",

src/lib/ngx-globe.component.ts

@@ -91,8 +91,16 @@ export class NgxGlobeComponent implements AfterViewInit, OnDestroy {
   pointerInteractionMovement = 0;
   private globeRotation = 0;
 
+  private intersectionObserver?: IntersectionObserver;
+  private isAnimating = false;
+
   ngAfterViewInit(): void {
     this.initGlobe();
+
+    this.intersectionObserver = new IntersectionObserver(([entry]) => {
+      this.renderContents(entry.isIntersecting)
+    })
+    this.intersectionObserver.observe(this.globeCanvas.nativeElement);
   }
 
   ngOnDestroy(): void {
@@ -105,6 +113,18 @@ export class NgxGlobeComponent implements AfterViewInit, OnDestroy {
     this.globeCanvas.nativeElement.height = this.globeSize;
   }
 
+  renderContents(isIntersecting: boolean) {
+    if (isIntersecting && !this.isAnimating) {
+      this.isAnimating = true;
+
+      this.globe?.toggle(true);
+    } else if (!isIntersecting && this.isAnimating) {
+      this.isAnimating = false;
+
+      this.globe?.toggle(false);
+    }
+  }
+
   initGlobe(): void {
     let phi = this.cobeOptions.phi;
     let cobeOptions = {