Improve loading state and connection status indicator

[DhanushNehru]

• Add a clear loading spinner or progress indicator while the app initializes WebRTC and discovers peers.
• Show distinct connection states (e.g., “Searching for peers…”, “Connected”, “Connection failed – retry”) to help users understand what is happening

[alimhuduev-tech]

HTML

Initializing WebRTC... Retry

CSS
.status-box {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
border-radius: 8px;
font-weight: 500;
transition: background-color 0.3s, color 0.3s;
}

.status-loading { background: #fff3cd; color: #856404; }
.status-connected { background: #d4edda; color: #155724; }
.status-error { background: #f8d7da; color: #721c24; }

.hidden { display: none !important; }

.spinner {
width: 16px;
height: 16px;
border: 3px solid rgba(0,0,0,0.1);
border-left-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@Keyframes spin {
to { transform: rotate(360deg); }
}

JavaScript
const statusContainer = document.getElementById('status-container');
const statusText = document.getElementById('status-text');
const statusSpinner = document.getElementById('status-spinner');
const retryBtn = document.getElementById('retry-btn');

const STATES = {
INIT: { text: 'Initializing...', class: 'status-loading', showSpinner: true },
SEARCHING: { text: 'Searching for peers...', class: 'status-loading', showSpinner: true },
CONNECTED: { text: 'Connected!', class: 'status-connected', showSpinner: false },
FAILED: { text: 'Connection failed', class: 'status-error', showSpinner: false }
};

function updateConnectionStatus(stateKey) {
const state = STATES[stateKey];
if (!state) return;

statusText.textContent = state.text;

statusContainer.className = status-box ${state.class};

statusSpinner.classList.toggle('hidden', !state.showSpinner);
retryBtn.classList.toggle('hidden', stateKey !== 'FAILED');
}

// WebRTC (RTCPeerConnection)
// peerConnection.oniceconnectionstatechange = () => {
// switch(peerConnection.iceConnectionState) {
// case 'checking':
// updateConnectionStatus('SEARCHING');
// break;
// case 'connected':
// case 'completed':
// updateConnectionStatus('CONNECTED');
// break;
// case 'failed':
// case 'disconnected':
// updateConnectionStatus('FAILED');
// break;
// }
// };

retryBtn.addEventListener('click', () => {
updateConnectionStatus('INIT');
// triggerReconnect(); //
});