[GitHub] hAtul89 opened a new issue #8345: How do I change the loaders text every x seconds without "bothering" the loader animation?

[GitBox <gi...@apache.org>]

hAtul89 opened a new issue #8345: How do I change the loaders text every x seconds without "bothering" the loader animation?
URL: https://github.com/apache/incubator-echarts/issues/8345
 
 
   This is part of my object: 
   
   
   	const qwData = {
   
   		// Initialize functions
   		init: function() {
   			this.cacheDom();
   			this.bindEvents();
   		},
   		// Cache vars 
   			cacheDom: function() {
   				this.dataDisplayed  = false;
   				this.countUsers 	= <?php echo $_SESSION['all_users_count_real']; ?>;
   				this.$form 			= $('#frm_reportit');
   				this.start_date 	= this.$form[0][9].value;
   				this.end_date 		= this.$form[0][10].value;
   				this.dateCount 		= this.countDays(this.start_date, this.end_date);
   				this.show 			= document.querySelector('#btn-show');
   				this.downloadBtn 	= document.querySelector('#download_summary_button');
   				this.$dataContainer = $('#qw-data-container');
   				this.$qwTable 		= $('#qwtable');
   				this.$qwTbody 		= this.$qwTable.find('tbody');
   				this.qwChart 		= echarts.init(document.getElementById('main-chart'));
   				this.progressBar 	= document.querySelector('.progress-bar');
   				Object.defineProperty(this, "progress", {
   	                get: () => {
   	                   return this.progressPrecent || 0;
   	                },
   	                set: (value) => {
   
   	                    if(value != this.progressPrecent){
   	                      this.progressPrecent = value;
   	                      this.setQwChartProgress(value);
   	                      this.setProgressBarValue(value);
   	                    }
   	                }, 
   					  configurable: true
   	            });
   	            this.qwChartProgress = this.progress;
   				},
   		// Bind click events (or any events..)
   		bindEvents: function() {
   			
   			var that = this;
   
   			// On click "Show" BTN
   			this.show.onclick = this.sendData.bind(this);
   			
   			// On Change inputs
   			this.$form.change(function(){
   				that.updateDatesInputs(this);
   			});
   
   		},
   		setQwChartProgress: function(value){
   			if (value != 0) {
   				// Show Chart Loading 
   				this.qwChart.showLoading({
   					color: '#00b0f0', 
   					text: value + '%' 
   				});
   			}
   		},    sendData: function(e) {
       	e.preventDefault();
       	let that = this;
       
       	$.ajax({
       		type: 'POST',
       		url: "/test/ajax.php?module=test_module",
       		dataType: 'json',
       		data: {
       				start_ts: that.start_date,
       				stop_ts: that.end_date, 
       				submitted: true
       		},
       		beforeSend: function() {
       
       			// Show Chart Loading 
       			that.qwChart.showLoading({ 
       				color: '#00b0f0', 
       				// text: that.returnNumWithPrecent(that.progress)
       				text: that.qwChartProgress
       			});
       
       			// If data div isn't displayed
       			if (!that.dataDisplayed) {
       				// Show divs loading
       				that.showMainDiv();
       			} else {
       				that.$qwTbody.slideUp('fast');
       				that.$qwTbody.html('');
       			}
       		},
       		complete: function(){
       
       
       			let timer = setInterval(that.incrementProgress, 500);
       
       		},
       		success: function(result){
       
       			// Set progressbar to 100%
       			that.setProgressBarTo100();
       
       			// Show Download Button
       			that.downloadBtn.style.display = 'inline-block';
       			
       			// Insert Chart Data
       			that.insertChartData(result);
       			
       			// Insert Table Data
       			that.insertTableData(result);
       		}
       	});
       
       	that.dataDisplayed = true;
       },
       // Insert Data to Table
       incrementProgress: function(){
       	this.progress += 10;
       },
       ..... 
       .............
       ....................
   
   
   I am trying to add percentages to my "echarts" object using `setQwChartProgress` where it gets the '[showLoading][1]' and changes its text. 
   
   When I run the script I get the percentages running properly, the problem is the loader: 
   
   It seems like it gets initialized and I cant see the loader animation (just a dot). When it reaches 99% and doesn't run `showLoading` - I do get the loader animation.
   
   **How can I set the text of the loader without initializing the loader too?** 
   
     [1]: https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.showLoading

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org