Add WithLoader
@@ -4,8 +4,9 @@ import {
IntegrationDetailDescription,
IntegrationDetailHistoryListView,
IntegrationDetailInfo,
+ Loader,
} from '@syndesis/ui';
-import { WithRouteData } from '@syndesis/utils';
+import { WithLoader, WithRouteData } from '@syndesis/utils';
import * as React from 'react';
import { Translation } from 'react-i18next';
import { IntegrationDetailSteps } from '../../../components';
@@ -40,24 +41,30 @@ export class DetailsPage extends React.Component {
integrationId={integrationId}
initialValue={integration}
>
+ {({ data, hasData, error }) => (
+ <WithLoader
+ error={error}
+ loading={!hasData}
+ loaderChildren={<Loader />}
+ errorChildren={<div>TODO</div>}
+ >
+ {() => (
<div>
<Translation ns={['integration', 'shared']}>
{t => (
<>
<IntegrationDetailInfo
- name={integration.name}
- version={integration.version}
- />
- <IntegrationDetailNavBar integration={integration} />
- <IntegrationDetailSteps
- steps={getSteps(integration, 0)}
+ name={data.name}
+ version={data.version}
/>
+ <IntegrationDetailNavBar integration={data} />
+ <IntegrationDetailSteps steps={getSteps(data, 0)} />
<IntegrationDetailDescription
- description={integration.description}
+ description={data.description}
/>
<IntegrationDetailHistoryListView
integrationIsDraft={false}
- children={integration.flows}
+ children={data.flows}
i18nTextDraft={t('Draft')}
i18nTextHistory={t('History')}
/>
@@ -65,6 +72,9 @@ export class DetailsPage extends React.Component {
)}
</Translation>
</div>
+ )}
+ </WithLoader>
+ )}
</WithIntegration>
);
}}
