From c6aec562b0a19a523ac26329eaa8967c13f85b2a Mon Sep 17 00:00:00 2001
From: ExtremesecrecyOne <131911364+ExtremesecrecyOne@users.noreply.github.com>
Date: Wed, 23 Jul 2025 07:58:23 -0700
Subject: [PATCH] Update JackServerSettingsDialog.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dialog now disables the device selectors and shows a “Loading…” placeholder until ALSA devices are available, preventing runtime errors during the initial render
---
 vite/src/pipedal/JackServerSettingsDialog.tsx | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/vite/src/pipedal/JackServerSettingsDialog.tsx b/vite/src/pipedal/JackServerSettingsDialog.tsx
index 4bd458d..4fd4246 100644
--- a/vite/src/pipedal/JackServerSettingsDialog.tsx
+++ b/vite/src/pipedal/JackServerSettingsDialog.tsx
@@ -458,31 +458,33 @@ const JackServerSettingsDialog = withStyles(
 						 {/* Audio Input Device */}
                             <FormControl className={classes.formControl}>
 							<InputLabel htmlFor="jsd_inputDevice">Input Device</InputLabel>
-							<Select
-							id="jsd_inputDevice"
-							value={this.state.jackServerSettings.alsaInputDevice}
-							onChange={e => this.handleInputDeviceChanged(e)}
-							style={{ width: 220 }}
-							>
-							{this.state.alsaDevices!.map(d => (
+						<Select
+						id="jsd_inputDevice"
+						value={this.state.jackServerSettings.alsaInputDevice}
+						onChange={e => this.handleInputDeviceChanged(e)}
+						disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
+						style={{ width: 220 }}
+						>
+						{this.state.alsaDevices?.map(d => (
 								<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
-							))}
-							</Select>
+						)) || <MenuItem value="" disabled>Loading...</MenuItem>}
+						</Select>
 						</FormControl>
 						
 						{/* Audio Output Device */}
 						<FormControl className={classes.formControl}>
 							<InputLabel htmlFor="jsd_outputDevice">Output Device</InputLabel>
-							<Select
-							id="jsd_outputDevice"
-							value={this.state.jackServerSettings.alsaOutputDevice}
-							onChange={e => this.handleOutputDeviceChanged(e)}
-							style={{ width: 220 }}
-							>
-							{this.state.alsaDevices!.map(d => (
-								<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
-							))}
-							</Select>
+							  <Select
+								id="jsd_outputDevice"
+								value={this.state.jackServerSettings.alsaOutputDevice}
+								onChange={e => this.handleOutputDeviceChanged(e)}
+								disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
+								style={{ width: 220 }}
+								>
+								{this.state.alsaDevices?.map(d => (
+										<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
+								)) || <MenuItem value="" disabled>Loading...</MenuItem>}
+								</Select>
 						</FormControl>
                         </div><div>
                             <FormControl className={classes.formControl}>