diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 3648c36f..2bb3bd52 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -16,6 +16,7 @@ import TableItemCheckbox from '../ascribe_table/table_item_checkbox'; import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered'; import { getLangText } from '../../utils/lang_utils'; +import { mergeOptions } from '../../utils/general_utils'; let AccordionListItemTableEditions = React.createClass({ @@ -25,7 +26,12 @@ let AccordionListItemTableEditions = React.createClass({ }, getInitialState() { - return EditionListStore.getState(); + return mergeOptions( + EditionListStore.getState(), + { + showMoreLoading: false + } + ); }, componentDidMount() { @@ -37,6 +43,12 @@ let AccordionListItemTableEditions = React.createClass({ }, onChange(state) { + if(this.state.showMoreLoading) { + this.setState({ + showMoreLoading: false + }); + } + this.setState(state); }, @@ -68,6 +80,11 @@ let AccordionListItemTableEditions = React.createClass({ }, loadFurtherEditions() { + // trigger loading animation + this.setState({ + showMoreLoading: true + }); + let editionList = this.state.editionList[this.props.parentId]; EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize); }, @@ -81,7 +98,7 @@ let AccordionListItemTableEditions = React.createClass({ let allEditionsCount = 0; let orderBy; let orderAsc; - let show; + let show = false; let showExpandOption = false; let editionsForPiece = this.state.editionList[this.props.parentId]; @@ -169,12 +186,14 @@ let AccordionListItemTableEditions = React.createClass({ ) ]; + let loadingSpinner = ; + return (
Hide all editions : Show all editions } /> + message={show && typeof editionsForPiece !== 'undefined' ? Hide editions : Show editions {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}} /> - + changeOrder={this.changeEditionListOrder} /> Show me more : ''} /> + message={show && showExpandOption ? Show me more {this.state.showMoreLoading ? loadingSpinner : null} : ''} />
); } diff --git a/sass/main.scss b/sass/main.scss index fda26fb0..8725d6f0 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -284,3 +284,39 @@ html { margin-right: 1px; margin-top: 1px; } + +.spin { + display:inline-block; + -webkit-animation: spin 1s infinite linear; + -moz-animation: spin 1s infinite linear; + -o-animation: spin 1s infinite linear; + -ms-animation: spin 1s infinite linear; + animation: spin 1s infinite linear; + -webkit-transform-origin: 55% 70%; + -moz-transform-origin: 55% 70%; + -o-transform-origin: 55% 70%; + transform-origin: 55% 70%; + width: 10px; + height: 10px; +} + +@-webkit-keyframes spin { +0% { -webkit-transform: rotate(0deg);} +100% { -webkit-transform: rotate(360deg);} +} +@-moz-keyframes spin { +0% { -moz-transform: rotate(0deg); } +100% { -moz-transform: rotate(360deg);} +} +@-o-keyframes spin { +0% { -o-transform: rotate(0deg);} +100% { -o-transform: rotate(360deg);} +} +@-ms-keyframes spin { +0% { -ms-transform: rotate(0deg);} +100% { -ms-transform: rotate(360deg);} +} +@-keyframes spin { +0% { transform: rotate(0deg); } +100% { transform: rotate(360deg);} +} \ No newline at end of file