Speed up browser phone initialization

- Add preload hint for Twilio SDK to start loading earlier
- Add DNS prefetch and preconnect for Twilio servers
- Check SDK immediately instead of waiting 500ms
- Reduce polling interval from 100ms to 50ms

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

admin/class-twp-admin.php

@@ -7017,7 +7017,6 @@ class TWP_Admin {
                     <div class="phone-display">
                         <div id="phone-status">Ready</div>
                         <div id="device-connection-status" style="font-size: 12px; color: #999; margin-top: 5px;">Loading...</div>
-                        <div id="twp-debug-info" style="font-size: 10px; color: #666; margin-top: 3px;"></div>
                         <div id="phone-number-display"></div>
                         <div id="call-timer" style="display: none;">00:00</div>
                     </div>
@@ -7446,6 +7445,11 @@ class TWP_Admin {
             }
             </style>
             
+            <!-- Preload and preconnect for faster loading -->
+            <link rel="preload" href="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js" as="script">
+            <link rel="dns-prefetch" href="//unpkg.com">
+            <link rel="dns-prefetch" href="//chunderw-vpc-gll.twilio.com">
+            <link rel="preconnect" href="https://chunderw-vpc-gll.twilio.com" crossorigin>
             <!-- Twilio Voice SDK v2 from unpkg CDN -->
             <script src="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js"></script>
             <script>
@@ -7675,7 +7679,6 @@ class TWP_Admin {
                 
                 // Initialize the browser phone
                 function initializeBrowserPhone() {
-                    debugLog('initializeBrowserPhone called');
                     $('#phone-status').text('Initializing...');
                     updateConnectionStatus('connecting');
 
@@ -7753,16 +7756,13 @@ class TWP_Admin {
                 }
 
                 async function setupTwilioDevice(token) {
-                    debugLog('setupTwilioDevice called');
                     try {
                         // Check if Twilio SDK is available
-                        debugLog('Twilio check: ' + (typeof Twilio) + ', Device: ' + (typeof Twilio !== 'undefined' ? typeof Twilio.Device : 'N/A'));
                         if (typeof Twilio === 'undefined' || !Twilio.Device) {
                             throw new Error('Twilio Voice SDK not loaded');
                         }
 
                         console.log('Setting up Twilio Device...');
-                        debugLog('Creating Twilio.Device...');
                         updateConnectionStatus('connecting');
 
                         // Request media permissions before setting up device
@@ -7812,13 +7812,11 @@ class TWP_Admin {
                         });
 
                         console.log('Twilio Device created with audio constraints:', audioConstraints);
-                        debugLog('Device created, setting up handlers...');
 
                         // Set up event handlers BEFORE registering
                         // Device registered and ready
                         device.on('registered', function() {
                             console.log('Device registered successfully');
-                            debugLog('Device REGISTERED!');
                             $('#phone-status').text('Ready').css('color', '#4CAF50');
                             $('#call-btn').prop('disabled', false);
                             updateConnectionStatus('connected');
@@ -7900,13 +7898,10 @@ class TWP_Admin {
                         });
                         
                         // Register device AFTER setting up event handlers
-                        debugLog('Calling device.register()...');
                         await device.register();
-                        debugLog('device.register() completed');
 
                     } catch (error) {
                         console.error('Error setting up Twilio Device:', error);
-                        debugLog('ERROR: ' + error.message);
                         showError('Failed to setup device: ' + error.message);
                     }
                 }
@@ -8242,31 +8237,41 @@ class TWP_Admin {
                     }
                 });
                 
-                // Debug helper
+                // Check if SDK loaded and initialize
-                function debugLog(msg) {
+                // Poll for Twilio SDK availability (window.load may not fire on mobile)
-                    console.log('TWP Debug: ' + msg);
+                var sdkCheckAttempts = 0;
-                    var debugEl = $('#twp-debug-info');
+                var maxSdkCheckAttempts = 100; // 5 seconds max (100 * 50ms)
-                    if (debugEl.length) {
+
-                        debugEl.append(msg + '<br>');
+                function checkAndInitialize() {
+                    sdkCheckAttempts++;
+
+                    if (typeof Twilio !== 'undefined' && Twilio.Device) {
+                        console.log('Twilio SDK loaded successfully');
+                        initializeBrowserPhone();
+                    } else if (sdkCheckAttempts < maxSdkCheckAttempts) {
+                        // Keep checking every 50ms for faster response
+                        setTimeout(checkAndInitialize, 50);
+                    } else {
+                        showError('Twilio Voice SDK failed to load. Please check your internet connection and try refreshing the page.');
+                        console.error('Twilio SDK not found after ' + sdkCheckAttempts + ' attempts.');
                     }
                 }
 
-                // Check if SDK loaded and initialize
+                // Check immediately - SDK script is synchronous so should be loaded
-                debugLog('jQuery ready');
+                // If not ready yet (mobile), polling will catch it
-                $(window).on('load', function() {
+                if (typeof Twilio !== 'undefined' && Twilio.Device) {
-                    debugLog('Window loaded');
+                    console.log('Twilio SDK already loaded');
-                    setTimeout(function() {
+                    initializeBrowserPhone();
-                        debugLog('Checking Twilio: ' + (typeof Twilio));
-                        if (typeof Twilio === 'undefined') {
-                            showError('Twilio Voice SDK failed to load. Please check your internet connection and try refreshing the page.');
-                            console.error('Twilio SDK not found. Script may be blocked or failed to load.');
-                            debugLog('SDK FAILED');
                 } else {
-                            console.log('Twilio SDK loaded successfully');
+                    // Start polling immediately
-                            debugLog('SDK OK, initializing...');
+                    checkAndInitialize();
+                }
+
+                // Also keep the window.load as backup for desktop
+                $(window).on('load', function() {
+                    if (typeof Twilio !== 'undefined' && !device) {
                         initializeBrowserPhone();
                     }
-                    }, 1000);
                 });
                 
                 // Clean up on page unload