IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/features/dashboard/containers/NewDashboardPage.tsx
View File

@@ -1,24 +1,19 @@
import React, { useState } from 'react';
import { useEffectOnce } from 'react-use';
import { config } from '@grafana/runtime';
import { t } from 'app/core/internationalization';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { EmptyStateNoDatasource } from 'app/features/datasources/components/EmptyStateNoDatasource';
import { loadDataSources } from 'app/features/datasources/state';
import { useDispatch, useSelector } from 'app/types';
import { useLoadDataSources } from 'app/features/datasources/state';
import { useSelector } from 'app/types';
import DashboardPage from './DashboardPage';
export default function NewDashboardPage(props: GrafanaRouteComponentProps) {
const dispatch = useDispatch();
useEffectOnce(() => {
dispatch(loadDataSources());
});
const { isLoading } = useLoadDataSources();
const { hasDatasource, loading } = useSelector((state) => ({
const { hasDatasource } = useSelector((state) => ({
hasDatasource: state.dataSources.dataSourcesCount > 0,
loading: !state.dataSources.hasFetched,
}));
const [createDashboard, setCreateDashboard] = useState(false);
const showDashboardPage = hasDatasource || createDashboard || !config.featureToggles.datasourceOnboarding;
@@ -28,7 +23,7 @@ export default function NewDashboardPage(props: GrafanaRouteComponentProps) {
) : (
<EmptyStateNoDatasource
onCTAClick={() => setCreateDashboard(true)}
loading={loading}
loading={isLoading}
title={t('datasource-onboarding.welcome', 'Welcome to Grafana dashboards!')}
CTAText={t('datasource-onboarding.sampleData', 'Or set up a new dashboard with sample data')}
navId="dashboards/browse"