Merge pull request #638 from hubmapconsortium/loadbar-patch

Patch for dissappearing loadbar on search with delayed response time

src/src/components/search/SearchComponent.jsx

@@ -24,7 +24,6 @@ import Forms from "../uuid/forms";
 // import { browserHistory } from 'react-router'
 
 class SearchComponent extends Component {
-
 
  constructor(props) {
  super(props);
@@ -324,11 +323,7 @@ class SearchComponent extends Component {
 
  handleSearchClick = () => {
  //this.setState({ loading: true, filtered: true, page: 0 });
- this.setState({ 
- loading: false,
- filtered: true
- });
-
+ console.debug("handleSearchClick")
  const group = this.state.group;
  const sample_type = this.state.sampleType;
  const keywords = this.state.keywords;
@@ -389,38 +384,47 @@ class SearchComponent extends Component {
  console.debug('results_total ', this.state.results_total);
  console.debug('From Page ', this.state.page);
  console.debug('From Page size', this.state.pageSize);
- if(this.state.results_total === 0 ){
- this.setState({
- loading: true,
- });
- }
- // console.debug("this.state.page", this.state.page);
- // if(this.state.page != 0 ){
- // this.setState({
- // table_loading:true, 
- // });
- // }
 
- api_search2(params, JSON.parse(localStorage.getItem("info")).nexus_token, this.state.page, this.state.pageSize)
- .then((response) => {
- console.debug("Search Res", response.results);
- this.setState({ loading: false });
- if (response.status === 200) {
- //console.debug('SEARCH RESULTS', response);
- if (response.total === 1) { // for single returned items, customize the columns to match
- which_cols_def = this.columnDefType(response.results[0].entity_type);
- ////console.debug("which_cols_def: ", which_cols_def);
- }
+
+ console.debug("this.state.page", this.state.page);
+ if(this.state.page != 0 ){
  this.setState({
- datarows: response.results, // Object.values(response.results)
- results_total: response.total,
- column_def: which_cols_def,
- loading: false,
- table_loading:false, 
+ table_loading:true, 
  });
+ }
+
+ this.setState({ 
+ loading: true,
+ filtered: true
+ },() => {
+ api_search2(params, JSON.parse(localStorage.getItem("info")).nexus_token, this.state.page, this.state.pageSize)
+ .then((response) => {
+ console.debug("Search Res", response.results);
+
+ if (response.status === 200) {
+ if (response.total === 1) { // for single returned items, customize the columns to match
+ which_cols_def = this.columnDefType(response.results[0].entity_type);
+ ////console.debug("which_cols_def: ", which_cols_def);
+ }else if(response.total <= 0 ){
+
+ console.log("0 results not mid-load");
+ }
+
+ this.setState({
+ datarows: response.results, // Object.values(response.results)
+ results_total: response.total,
+ column_def: which_cols_def,
+ loading: false,
+ table_loading:false, 
+ });
+ }else{
+ console.debug("Error on Search ", response)
  }
- })
+  })
 
+ });
+
+
  };
 
  columnDefType = (et) => {
@@ -471,8 +475,10 @@ class SearchComponent extends Component {
  }
 
  handleSearchButtonClick = () => {
+ console.debug("handleSearchButtonClick")
  this.setState({
  datarows: [],
+ loading: true,
  page: 0 // reset the page
  }, () => { // need to do this in order for it to execute after setting the state or state won't be available
  this.handleSearchClick();
@@ -637,7 +643,7 @@ class SearchComponent extends Component {
  {this.state.show_search && (
  this.renderFilterControls()
  )}
- {this.state.loading && this.state.page === 0 &&(
+ {this.state.loading &&(
  this.renderLoadingBar()
  )}
  {this.state.show_search && this.state.datarows &&
@@ -731,11 +737,15 @@ renderInfoPanel() {
  }
 
  renderLoadingBar = () => {
+
+ if( this.state.loading && !this.state.page > 0 ){
  return (
- <div>
- <LinearProgress />
- </div>
- )
+ <div>
+ <LinearProgress />
+ </div>
+ )
+ }
+
  }
 
  renderTable() {