Datasource Onboarding: Prevent flickering of onboarding page after first load (#63360)

* Datasource Onboarding: Prevent flickering of onboarding page after first load

* add loading state to loadDatasources & refactor

* fix test

* avoid loading state when loading datasources on add

* fix test

* add explainer on why fetching datasources is needed
This commit is contained in:
Giordano Ricci
2023-02-24 11:48:30 +00:00
committed by GitHub
parent 200d2ad249
commit c136ad1f16
10 changed files with 45 additions and 40 deletions

View File

@@ -28,6 +28,7 @@ import {
dataSourceMetaLoaded,
dataSourcePluginsLoad,
dataSourcePluginsLoaded,
dataSourcesLoad,
dataSourcesLoaded,
initDataSourceSettingsFailed,
initDataSourceSettingsSucceeded,
@@ -144,8 +145,9 @@ export const testDataSource = (
};
};
export function loadDataSources(): ThunkResult<void> {
export function loadDataSources(): ThunkResult<Promise<void>> {
return async (dispatch) => {
dispatch(dataSourcesLoad());
const response = await api.getDataSources();
dispatch(dataSourcesLoaded(response));
};
@@ -193,9 +195,16 @@ export function loadDataSourceMeta(dataSource: DataSourceSettings): ThunkResult<
};
}
export function addDataSource(plugin: DataSourcePluginMeta, editRoute = DATASOURCES_ROUTES.Edit): ThunkResult<void> {
export function addDataSource(
plugin: DataSourcePluginMeta,
editRoute = DATASOURCES_ROUTES.Edit
): ThunkResult<Promise<void>> {
return async (dispatch, getStore) => {
await dispatch(loadDataSources());
// update the list of datasources first.
// We later use this list to check whether the name of the datasource
// being created is unuque or not and assign a new name to it if needed.
const response = await api.getDataSources();
dispatch(dataSourcesLoaded(response));
const dataSources = getStore().dataSources.dataSources;
const isFirstDataSource = dataSources.length === 0;