getheimdall · dijalmass · Nov 1, 2018
diff --git a/heimdall-frontend/package-lock.json b/heimdall-frontend/package-lock.json
diff --git a/heimdall-frontend/src/actions/apis/index.js b/heimdall-frontend/src/actions/apis/index.js
@@ -10,10 +10,21 @@ const receiveApis = apis => ({
     apis
 })
 
+export const initLoading = () => dispatch => {
+    dispatch({ type: ApiConstants.API_LOADING })
+}
+
+export const finishLoading = () => dispatch => {
+    dispatch({ type: ApiConstants.API_LOADING_FINISH })
+}
+
 // Get async apis list
 export const getAllApis = () => dispatch => {
     apiService.getApis()
-        .then(data => dispatch(receiveApis(data)))
+        .then(data => {
+            dispatch(receiveApis(data))
+            dispatch(finishLoading())
+        })
         .catch(error => {
             if (error.response && error.response.status === 400) {
                 dispatch(sendNotification({ type: 'error', message: i18n.t('error'), description: error.response.data.message }))
@@ -29,7 +40,10 @@ const receiveApi = api => ({ type: ApiConstants.RECEIVE_API, api })
 
 export const getApiById = (id) => dispatch => {
     apiService.getApiById(id)
-        .then(data => dispatch(receiveApi(data)))
+        .then(data => {
+            dispatch(receiveApi(data))
+            dispatch(finishLoading())
+        })
         .catch(error => {
             if (error.response && error.response.status === 400) {
                 dispatch(sendNotification({ type: 'error', message: i18n.t('error'), description: error.response.data.message }))

diff --git a/heimdall-frontend/src/components/apis/Index.js b/heimdall-frontend/src/components/apis/Index.js
@@ -3,10 +3,9 @@ import { connect } from 'react-redux'
 import { Row, Col, Form, Input, Button, Tooltip, notification } from 'antd'
 
 import i18n from "../../i18n/i18n"
-import { getAllApis } from '../../actions/apis'
+import { getAllApis, initLoading } from '../../actions/apis'
 import ListApis from './ListApis'
 import PageHeader from '../ui/PageHeader'
-import Loading from '../ui/Loading'
 // import FloatButton from '../ui/FloatButton'
 
 const FormItem = Form.Item
@@ -26,6 +25,7 @@ class Index extends Component {
     }
 
     componentDidMount() {
+        this.props.dispatch(initLoading())
         this.props.dispatch(getAllApis())
         this.setState({
             iconLoading: false
@@ -37,16 +37,15 @@ class Index extends Component {
     }
 
     render() {
-        const { apis } = this.props
+        const { apis, loading } = this.props
         const { history } = this.props
+        let filteredApis = [ {}, {}, {}, {}, {} ]
 
-        let listApi = null
-        if (!apis) {
-            listApi = <Loading />
-        } else {
-            const filteredApis = apis.filter(item => item.name.toUpperCase().includes(this.state.searchBy.toUpperCase()))
-            listApi = <ListApis apis={filteredApis} history={history} />
+        if (!loading && apis) {
+           filteredApis = apis.filter(item => item.name.toUpperCase().includes(this.state.searchBy.toUpperCase()))
         }
+        const listApi = <ListApis apis={filteredApis} history={history} loading={this.props.loading}/>
+
         return (
             <div>
                 <PageHeader title={i18n.t('apis')} icon="api" />
@@ -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
@@ -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 (
             <Row className="h-row api_list" gutter={20}>
                 {apis && apis.length > 0
@@ -28,15 +29,19 @@ class ListApis extends Component {
                                     className="heimdall-card"
                                     title={
                                         <div style={{paddingLeft: 24, paddingRight: 24, paddingTop: 16, paddingBottom: 16, cursor: 'pointer'}} onClick={this.redirect('/apis/' + api.id)}>
-                                            <span>{api.name}</span>
+                                            <Skeleton title={10} active paragraph={{ rows: 0 }} loading={loading}>
+                                                <span>{api.name}</span>
+                                            </Skeleton>
                                         </div>
                                     }
                                     actions={[
                                         <Tooltip title={i18n.t('view')} onClick={this.redirect('/apis/' + api.id)}><Icon type="search" /></Tooltip>
                                     ]}
                                 >
                                     <div className="heimdall-card-body" onClick={this.redirect('/apis/' + api.id)}>
-                                        <span className="api_description">{api.description}</span>
+                                        <Skeleton active paragraph={{ rows: 2 }} title={0} loading={loading}>
+                                            <span className="api_description">{api.description}</span>
+                                        </Skeleton>
                                     </div>
                                 </Card>
                             </Col>

diff --git 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 <Loading />
+        if (!this.props.api || !this.props.environments) return <SingleApiSkeleton />
 
         const { api } = this.props
 

diff --git a/heimdall-frontend/src/components/interceptors/DropClientInterceptors.js b/heimdall-frontend/src/components/interceptors/DropClientInterceptors.js
@@ -71,7 +71,7 @@ class DropClientInterceptors extends Component {
             <div>
                 <Row id="drop-client-interceptors" className="draggable-pane" style={style}>
                     <Row type="flex" justify="center">
-                        <sup className="ant-scroll-number ant-badge-count" style={{backgroundColor: 'grey', width: 100, textTransform: 'uppercase'}}>{description}</sup>
+                        <sup className="ant-scroll-number ant-badge-count description-drop-client" style={{backgroundColor: 'grey', width: 100, textTransform: 'uppercase' }}>{description}</sup>
                     </Row>
                     {!this.props.interceptors && <Loading />}
                     {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
@@ -0,0 +1,40 @@
+import React from 'react'
+import {Button, List, Row, Skeleton} from 'antd'
+
+const ButtonGroup = Button.Group
+const operationsFiltered = [ {}, {}, {}, {}, {} ]
+
+const ListOperationSkeleton = () => (
+    <div style={{ position: 'relative' }}>
+        <Row type="flex" justify="center">
+            <div align="center">
+                <Skeleton title={{width: 200}} paragraph={false} active />
+            </div>
+        </Row>
+        <List
+            className="demo-loadmore-list"
+            itemLayout="horizontal"
+            dataSource={operationsFiltered}
+            renderItem={operation => {
+                return (
+                    <List.Item>
+                        <List.Item.Meta
+                            avatar={
+                                <Skeleton avatar={{ size: 'large' }} title={false} paragraph={false} active/>
+                            }
+                            title={<Skeleton title={{ width: '20%' }} paragraph={false} active />}
+                            description={<Skeleton title={{width: '50%'}} paragraph={false} active />}
+                        />
+                        <Row type="flex" justify="center">
+                            <ButtonGroup>
+                                <Skeleton title paragraph={false} active/>
+                            </ButtonGroup>
+                        </Row>
+                    </List.Item>
+                )
+            }}
+        />
+    </div>
+)
+
+export default ListOperationSkeleton
diff --git a/heimdall-frontend/src/components/skeletons/ListResourcesSkeleton.js 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 = () => (
+    <Row>
+        <HeimdallCollapse onChange={this.callback}>
+            <HeimdallPanel className={"header-tour"} header={<Skeleton title={{width: '50%'}} paragraph={false} />} key={0} extra={
+                <Row type="flex" justify="center">
+                    <Skeleton active title paragraph={false} />
+                </Row>
+            } extraWidth={10}>
+                <Skeleton />
+            </HeimdallPanel>
+        </HeimdallCollapse>
+        <HeimdallCollapse onChange={this.callback}>
+            <HeimdallPanel className={"header-tour"} header={<Skeleton title={{width: '50%'}} paragraph={false} />} key={1} extra={
+                 <Row type="flex" justify="center">
+                    <Skeleton active title paragraph={false}/>
+                </Row>
+            } extraWidth={10}>
+                <Skeleton />
+            </HeimdallPanel>
+        </HeimdallCollapse>
+        <HeimdallCollapse onChange={this.callback}>
+            <HeimdallPanel className={"header-tour"} header={<Skeleton title={{width: '50%'}} paragraph={false} />} key={2} extra={
+                 <Row type="flex" justify="center">
+                    <Skeleton active title paragraph={false}/>
+                </Row>
+            } extraWidth={10}>
+                <Skeleton />
+            </HeimdallPanel>
+        </HeimdallCollapse>
+        <HeimdallCollapse onChange={this.callback}>
+            <HeimdallPanel className={"header-tour"} header={<Skeleton title={{width: '50%'}} paragraph={false} />} key={3} extra={
+                 <Row type="flex" justify="center">
+                    <Skeleton active title paragraph={false}/>
+                </Row>
+            } extraWidth={10}>
+                <Skeleton />
+            </HeimdallPanel>
+        </HeimdallCollapse>
+    </Row>
+)
+
+export default ListResourcesSkeleton
diff --git a/heimdall-frontend/src/components/skeletons/SingleAccessTokenSkeleton.js 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 = () => (
+    <div>
+        <PageHeader title={i18n.t('access_tokens')} icon="key" />
+        <Row className="h-row bg-white">
+            <Card style={{ width: '100%' }} title={<Skeleton title={{width: 200}} paragraph={false} active />}>
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+
+                <div align="right">
+                    <Skeleton title={{ width: 100 }} paragraph={false} active />
+                </div>
+            </Card>
+        </Row>
+    </div>
+)
+
+export default SingleAccessTokenSkeleton
diff --git a/heimdall-frontend/src/components/skeletons/SingleApiSkeleton.js 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 = () => (
+    <div className="joy">
+        <PageHeader title={i18n.t('apis')} icon="api" />
+        <Row>
+            <Card style={{ width: '100%' }} title={<Skeleton title={{ width: '20%' }} paragraph={false} active/>}>
+                <Tabs defaultActiveKey="1" className="resource-tour">
+                    <TabPane tab={i18n.t('definitions')} key="1">
+                       <Skeleton active title={false} paragraph={{ rows: 4 }}/>
+                    </TabPane>
+                    <TabPane tab={<div role="tab" className="ant-tabs-tab resource">{i18n.t('resources')}</div>} key="2" >
+                        <Skeleton active title={false} paragraph={{ rows: 4 }}/>
+                    </TabPane>
+                    <TabPane tab={<div role="tab" className="ant-tabs-tab interceptors">{i18n.t('interceptors')}</div>} key="3">
+                        <Skeleton active title={false} paragraph={{ rows: 4 }}/>
+                    </TabPane>
+                    <TabPane tab={<div role="tab" className="ant-tabs-tab middlewares">{i18n.t('middlewares')}</div>} key="4">
+                        <Skeleton active title={false} paragraph={{ rows: 4 }}/>
+                    </TabPane>
+                </Tabs>
+            </Card>
+        </Row>
+    </div>
+)
+
+export default SingleApiSkeleton
diff --git a/heimdall-frontend/src/components/skeletons/SingleAppSkeleton.js b/heimdall-frontend/src/components/skeletons/SingleAppSkeleton.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import {Card, Row, Skeleton} from "antd"
+
+import i18n from "../../i18n/i18n"
+import PageHeader from "../ui/PageHeader"
+
+const SingleAppSkeleton = () => (
+    <div>
+        <PageHeader title={i18n.t('apps')} icon="appstore" />
+        <Row className="h-row bg-white">
+            <Card style={{ width: '100%' }} title={<Skeleton title={{width: 200}} paragraph={false} active />}>
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <br/>
+                <Skeleton paragraph={{ rows: 5 }}/>
+                <div align="right">
+                    <Skeleton title={{ width: 100 }} paragraph={false} active />
+                </div>
+            </Card>
+        </Row>
+    </div>
+)
+
+export default SingleAppSkeleton
diff --git a/heimdall-frontend/src/components/skeletons/SingleDeveloperSkeleton.js b/heimdall-frontend/src/components/skeletons/SingleDeveloperSkeleton.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import {Card, Row, Skeleton} from "antd"
+
+import i18n from "../../i18n/i18n"
+import PageHeader from "../ui/PageHeader"
+
+const SingleDeveloperSkeleton = () => (
+    <div>
+        <PageHeader title={i18n.t('developers')} icon="code" />
+        <Row className="h-row bg-white">
+            <Card style={{ width: '100%' }} title={<Skeleton title={{width: 200}} paragraph={false} active />}>
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <div align="right">
+                    <Skeleton title={{ width: 100 }} paragraph={false} active />
+                </div>
+            </Card>
+        </Row>
+    </div>
+)
+
+export default SingleDeveloperSkeleton
diff --git a/heimdall-frontend/src/components/skeletons/SinglePlanSkeleton.js b/heimdall-frontend/src/components/skeletons/SinglePlanSkeleton.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 SinglePlanSkeleton = () => (
+    <div>
+        <PageHeader title={i18n.t('plans')} icon="profile" />
+        <Row className="h-row bg-white">
+            <Card style={{ width: '100%' }} title={<Skeleton title={{width: 200}} paragraph={false} active />}>
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <Skeleton title={{ width: 100 }} paragraph={{ rows: 1, width: '100%' }} active />
+                <div align="right">
+                    <Skeleton title={{ width: 100 }} paragraph={false} active />
+                </div>
+            </Card>
+        </Row>
+    </div>
+)
+
+export default SinglePlanSkeleton