diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts index f919f4ccb3..5e548f1148 100644 --- a/extensions/resource-deployment/src/ui/modelViewUtils.ts +++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts @@ -614,7 +614,6 @@ async function processOptionsTypeField(context: FieldContext): Promise { if (context.fieldInfo.options.source?.providerId) { try { context.fieldInfo.options.source.provider = optionsSourcesService.getOptionsSource(context.fieldInfo.options.source.providerId); - context.fieldInfo.options.values = await context.fieldInfo.options.source.provider.getOptions(); } catch (e) { disableControlButtons(context.container); @@ -628,16 +627,25 @@ async function processOptionsTypeField(context: FieldContext): Promise { context.fieldInfo.subFields = context.fieldInfo.subFields || []; } let optionsComponent: RadioGroupLoadingComponentBuilder | azdata.DropDownComponent; + const options = context.fieldInfo.options; + const optionsSource = options.source; if (context.fieldInfo.options.optionsType === OptionsType.Radio) { - optionsComponent = await processRadioOptionsTypeField(context); + let getRadioOptions: (() => Promise) | undefined = undefined; + // If the options are provided for us then set up the callback to load those options async'ly + if (optionsSource?.provider) { + getRadioOptions = async () => { + return { defaultValue: options.defaultValue, values: await optionsSource.provider!.getOptions() }; + }; + } + optionsComponent = await processRadioOptionsTypeField(context, getRadioOptions); } else { throwUnless(context.fieldInfo.options.optionsType === OptionsType.Dropdown, loc.optionsTypeRadioOrDropdown); optionsComponent = processDropdownOptionsTypeField(context); } - const optionsSource = context.fieldInfo.options.source; + if (optionsSource?.provider) { const optionsSourceProvider = optionsSource.provider; - await Promise.all(Object.keys(context.fieldInfo.options.source?.variableNames ?? {}).map(async key => { + await Promise.all(Object.keys(optionsSource?.variableNames ?? {}).map(async key => { await configureOptionsSourceSubfields(context, optionsSource, key, optionsComponent, optionsSourceProvider); })); } @@ -966,8 +974,8 @@ async function processKubeConfigClusterPickerField(context: KubeClusterContextFi } -async function processRadioOptionsTypeField(context: FieldContext): Promise { - return await createRadioOptions(context); +async function processRadioOptionsTypeField(context: FieldContext, getRadioButtonInfo?: () => Promise): Promise { + return await createRadioOptions(context, getRadioButtonInfo); } @@ -989,8 +997,10 @@ async function createRadioOptions(context: FieldContext, getRadioButtonInfo?: (( }); addLabelInputPairToContainer(context.view, context.components, label, radioGroupLoadingComponentBuilder.component(), context.fieldInfo); const options = context.fieldInfo.options as OptionsInfo; - await radioGroupLoadingComponentBuilder.loadOptions( - getRadioButtonInfo || options); // wait for the radioGroup to be fully initialized + // Start loading the options but continue on so that we can continue setting up the rest of the components - the group + // will show a loading spinner while the options are loaded + radioGroupLoadingComponentBuilder.loadOptions( + getRadioButtonInfo || options).catch(e => console.log('Error loading options for radio group ', e)); return radioGroupLoadingComponentBuilder; } diff --git a/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts b/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts index ce7657c090..12aefb0257 100644 --- a/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts +++ b/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts @@ -42,6 +42,9 @@ export default class LoadingComponent extends ComponentBase