diff --git a/src/app/core/side-panel/side-panel.service.ts b/src/app/core/side-panel/side-panel.service.ts
index 96e4162..6857f7d 100644
--- a/src/app/core/side-panel/side-panel.service.ts
+++ b/src/app/core/side-panel/side-panel.service.ts
@@ -13,6 +13,7 @@
   public sidePanelElName = 'xos-side-panel';
   public sidePanelElClass = '.xos-side-panel';
   public sidePanelEl: JQuery;
+  private hasComponentLoaded: boolean;
 
   constructor (
     private $rootScope: ng.IRootScopeService,
@@ -32,14 +33,23 @@
   };
 
   public injectComponent(componentName: string, attributes?: any, transclude?: string) {
-    this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
-    this.open();
+    let timeout = 0;
+    if (this.hasComponentLoaded) {
+      this.removeInjectedComponents();
+      timeout = 501; // wait for panel to close and remove component
+    }
+    this.$timeout(() => {
+      this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
+      this.hasComponentLoaded = true;
+      this.open();
+    }, timeout);
   }
 
   public removeInjectedComponents() {
     this.close();
     this.$timeout(() => {
       this.XosComponentInjector.removeInjectedComponents('#side-panel-container');
+      this.hasComponentLoaded = false;
     }, 500);
   }
 }