@@ -76,6 +75,7 @@ const mapStateToProps = (state) => {
return {
apis: state.apis.allApis,
notification: state.apis.notification,
+ loading: state.apis.loading,
}
}
diff --git a/heimdall-frontend/src/components/apis/ListApis.js b/heimdall-frontend/src/components/apis/ListApis.js
index aa92d605..898f610f 100644
--- a/heimdall-frontend/src/components/apis/ListApis.js
+++ b/heimdall-frontend/src/components/apis/ListApis.js
@@ -6,6 +6,7 @@ import {
Card,
Tooltip,
Icon,
+ Skeleton
} from 'antd'
import i18n from "../../i18n/i18n"
@@ -17,7 +18,7 @@ class ListApis extends Component {
}
render() {
- const { apis } = this.props
+ const { apis, loading } = this.props
return (
{apis && apis.length > 0
@@ -28,7 +29,9 @@ class ListApis extends Component {
className="heimdall-card"
title={
- {api.name}
+
+ {api.name}
+
}
actions={[
@@ -36,7 +39,9 @@ class ListApis extends Component {
]}
>
- {api.description}
+
+ {api.description}
+
diff --git a/heimdall-frontend/src/components/apis/SingleApi.js b/heimdall-frontend/src/components/apis/SingleApi.js
index a7a7c50c..375d226d 100644
--- a/heimdall-frontend/src/components/apis/SingleApi.js
+++ b/heimdall-frontend/src/components/apis/SingleApi.js
@@ -11,7 +11,7 @@ import ApiDefinition from './ApiDefinition'
import Resources from '../../containers/Resources'
import Interceptors from '../../containers/Interceptors'
import Middlewares from '../../containers/Middlewares'
-import Loading from '../ui/Loading'
+import SingleApiSkeleton from "../skeletons/SingleApiSkeleton"
const TabPane = Tabs.TabPane;
@@ -44,7 +44,7 @@ class SingleApi extends Component {
}
render() {
- if (!this.props.api || !this.props.environments) return
+ if (!this.props.api || !this.props.environments) return
const { api } = this.props
diff --git a/heimdall-frontend/src/components/interceptors/DropClientInterceptors.js b/heimdall-frontend/src/components/interceptors/DropClientInterceptors.js
index f395332d..97c1273a 100644
--- a/heimdall-frontend/src/components/interceptors/DropClientInterceptors.js
+++ b/heimdall-frontend/src/components/interceptors/DropClientInterceptors.js
@@ -71,7 +71,7 @@ class DropClientInterceptors extends Component {
- {description}
+ {description}
{!this.props.interceptors && }
{this.props.interceptors && this.props.interceptors.map((interceptor, index) => {
diff --git a/heimdall-frontend/src/components/skeletons/ListOperationsSkeleton.js b/heimdall-frontend/src/components/skeletons/ListOperationsSkeleton.js
new file mode 100644
index 00000000..9e06e759
--- /dev/null
+++ b/heimdall-frontend/src/components/skeletons/ListOperationsSkeleton.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import {Button, List, Row, Skeleton} from 'antd'
+
+const ButtonGroup = Button.Group
+const operationsFiltered = [ {}, {}, {}, {}, {} ]
+
+const ListOperationSkeleton = () => (
+
+
+
+
+
+
+
{
+ return (
+
+
+ }
+ title={}
+ description={}
+ />
+
+
+
+
+
+
+ )
+ }}
+ />
+
+)
+
+export default ListOperationSkeleton
\ No newline at end of file
diff --git a/heimdall-frontend/src/components/skeletons/ListResourcesSkeleton.js b/heimdall-frontend/src/components/skeletons/ListResourcesSkeleton.js
new file mode 100644
index 00000000..c24f1b9f
--- /dev/null
+++ b/heimdall-frontend/src/components/skeletons/ListResourcesSkeleton.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import {Row, Skeleton } from 'antd'
+import HeimdallCollapse from "../collapse"
+
+const HeimdallPanel = HeimdallCollapse.Panel
+
+const ListResourcesSkeleton = () => (
+
+
+ } key={0} extra={
+
+
+
+ } extraWidth={10}>
+
+
+
+
+ } key={1} extra={
+
+
+
+ } extraWidth={10}>
+
+
+
+
+ } key={2} extra={
+
+
+
+ } extraWidth={10}>
+
+
+
+
+ } key={3} extra={
+
+
+
+ } extraWidth={10}>
+
+
+
+
+)
+
+export default ListResourcesSkeleton
\ No newline at end of file
diff --git a/heimdall-frontend/src/components/skeletons/SingleAccessTokenSkeleton.js b/heimdall-frontend/src/components/skeletons/SingleAccessTokenSkeleton.js
new file mode 100644
index 00000000..866fc5e3
--- /dev/null
+++ b/heimdall-frontend/src/components/skeletons/SingleAccessTokenSkeleton.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import {Card, Row, Skeleton} from "antd"
+
+import i18n from "../../i18n/i18n"
+import PageHeader from "../ui/PageHeader"
+
+const SingleAccessTokenSkeleton = () => (
+
+
+
+ }>
+
+
+
+
+
+
+
+
+
+)
+
+export default SingleAccessTokenSkeleton
\ No newline at end of file
diff --git a/heimdall-frontend/src/components/skeletons/SingleApiSkeleton.js b/heimdall-frontend/src/components/skeletons/SingleApiSkeleton.js
new file mode 100644
index 00000000..32c63525
--- /dev/null
+++ b/heimdall-frontend/src/components/skeletons/SingleApiSkeleton.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import {Card, Row, Skeleton, Tabs} from 'antd'
+
+import i18n from "../../i18n/i18n"
+import PageHeader from "../ui/PageHeader"
+
+const TabPane = Tabs.TabPane
+
+const SingleApiSkeleton = () => (
+
+
+
+ }>
+
+
+
+
+ {i18n.t('resources')}
} key="2" >
+
+
+ {i18n.t('interceptors')}
} key="3">
+
+
+ {i18n.t('middlewares')}
} key="4">
+