@forcecalendar/interface 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/ForceCalendar.js

@@ -31,6 +31,7 @@ export class ForceCalendar extends BaseComponent {
         this.currentView = null;
         this._hasRendered = false;  // Track if initial render is complete
         this._cachedStyles = null;  // Cache styles to avoid recreation
+        this._busUnsubscribers = [];
     }
 
     initialize() {
@@ -53,25 +54,29 @@ export class ForceCalendar extends BaseComponent {
     }
 
     setupEventListeners() {
+        // Clean up any existing subscriptions before re-subscribing
+        this._busUnsubscribers.forEach(unsub => unsub());
+        this._busUnsubscribers = [];
+
         // Navigation events
-        eventBus.on('navigation:*', (data, event) => {
+        this._busUnsubscribers.push(eventBus.on('navigation:*', (data, event) => {
             this.emit('calendar-navigate', { action: event.split(':')[1], ...data });
-        });
+        }));
 
         // View change events
-        eventBus.on('view:changed', (data) => {
+        this._busUnsubscribers.push(eventBus.on('view:changed', (data) => {
             this.emit('calendar-view-change', data);
-        });
+        }));
 
         // Event management events
-        eventBus.on('event:*', (data, event) => {
+        this._busUnsubscribers.push(eventBus.on('event:*', (data, event) => {
             this.emit(`calendar-event-${event.split(':')[1]}`, data);
-        });
+        }));
 
         // Date selection events
-        eventBus.on('date:selected', (data) => {
+        this._busUnsubscribers.push(eventBus.on('date:selected', (data) => {
             this.emit('calendar-date-select', data);
-        });
+        }));
     }
 
     handleStateChange(newState, oldState) {
@@ -88,10 +93,14 @@ export class ForceCalendar extends BaseComponent {
         const errorChanged = newState.error !== oldState?.error;
 
         // For loading/error state changes, do full re-render (rare)
-        if (loadingChanged || errorChanged) {
+        if (errorChanged) {
             this.render();
             return;
         }
+        if (loadingChanged) {
+            this._updateLoadingState(newState.loading);
+            return;
+        }
 
         // Update local view reference if needed
         if (viewChanged) {
@@ -179,15 +188,31 @@ export class ForceCalendar extends BaseComponent {
         }
     }
 
+    /**
+     * Toggle loading overlay without rebuilding the component tree.
+     */
+    _updateLoadingState(isLoading) {
+        const loadingEl = this.$('.fc-loading');
+        const viewContainer = this.$('.fc-view-container');
+        if (loadingEl) {
+            loadingEl.style.display = isLoading ? 'flex' : 'none';
+        }
+        if (viewContainer) {
+            viewContainer.style.display = isLoading ? 'none' : 'flex';
+        }
+    }
+
     mount() {
+        this.currentView = this.stateManager.getView();
         super.mount();
-        this.loadView(this.stateManager.getView());
     }
 
     loadView(viewType) {
-        // Views are already registered at the top of the file
+        if (!viewType || this.currentView === viewType) return;
         this.currentView = viewType;
-        this.render();
+        this._switchView();
+        this._updateViewButtons();
+        this._updateTitle();
     }
 
     getStyles() {
@@ -632,16 +657,13 @@ export class ForceCalendar extends BaseComponent {
                 </header>
 
                 <div class="fc-body">
-                    ${loading ? `
-                        <div class="fc-loading">
-                            <div class="fc-spinner"></div>
-                            <span>Loading...</span>
-                        </div>
-                    ` : `
-                        <div class="fc-view-container">
-                            ${this.renderView()}
-                        </div>
-                    `}
+                    <div class="fc-loading" style="display: ${loading ? 'flex' : 'none'};">
+                        <div class="fc-spinner"></div>
+                        <span>Loading...</span>
+                    </div>
+                    <div class="fc-view-container" style="display: ${loading ? 'none' : 'flex'};">
+                        ${this.renderView()}
+                    </div>
                 </div>
                 
                 <forcecal-event-form id="event-modal"></forcecal-event-form>
@@ -857,10 +879,12 @@ export class ForceCalendar extends BaseComponent {
     }
 
     destroy() {
+        this._busUnsubscribers.forEach(unsub => unsub());
+        this._busUnsubscribers = [];
+
         if (this.stateManager) {
             this.stateManager.destroy();
         }
-        eventBus.clear();
         super.cleanup();
     }
 }
@@ -868,4 +892,4 @@ export class ForceCalendar extends BaseComponent {
 // Register component
 if (!customElements.get('forcecal-main')) {
     customElements.define('forcecal-main', ForceCalendar);
-}
+}