Constant Loading When in Tabs

[ghost]

Version 2.2.0

Vue.js version 2.4.2

What is expected?

I have a news viewer component that has 2 tabs, one for latest articles and one for tweets.

Ideally I'd like to use the infinite-loading for both tabs, but when I tried scrolling was detected on both instances since the tab content exists on the same page, so I opted to just use it on the tweets tab since there is far more content.

What is actually happening?

When the tweets tab is not active the infinite scroll component just massively loads over and over. No loaded state is ever triggered. If I set the tweets tab to active on page load, I get proper loading initially, but once I change tabs ... massive loading again.

How to reproduce this problem?

My code looks like so:

<template>
<div class="card-content" id="twitter-feeds">
	<ul class="twitter-feed">
		<li v-for="tweet, i in tweets">
			<div class="tweet grey lighten-3 z-depth-1">
				<img :src="tweet.image" class="responsive-img circle z-depth-4 left">
				<p class="title" v-html="tweet.username"></p>
				<p class="summary" v-html="tweet.content"></p>
				<div class="sources">
					<span class="source date">Source: <a :href="tweet.link" target="_blank">{{ tweet.tweet_id }}</a></span>
					<span class="posted date">Posted: {{ tweet.posted_at }}</span>
				</div>
			</div>
		</li>
		<infinite-loading @infinite="infiniteHandler"></infinite-loading>
	</ul>
</div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
	name: 'TwitterLinks',
	
	components: {
		InfiniteLoading
	},

	data () {
		return {
			tweets: [],
			page: 1
		};
	},

	methods: {
		infiniteHandler($state) {
			axios.get('/news/tweets', {
				params: {
					page: this.page,
				},
			}).then((response) => {
				if (response.data.data.length) {
					this.tweets = this.tweets.concat(response.data.data);
					$state.loaded();
					if (this.page == response.data.last_page) {
						$state.complete();
					} else {
						this.page = response.data.current_page + 1;
					}
				} else {
					$state.complete();
				}
			});
		}
	}
};
</script>

I'm using Laravel 5.4 as my API which returns a LengthAwarePaginator so I have access to current_page, last_page etc.

I tried the infinite-wrapper approach which caused the component to either fail completely, or constantly load as always, no change basically.

Thanks

[PeachScript]

Okay, I will disable attempt load when this component is invisible in the next version, thanks!

[PeachScript]

Hi @19peaches , I have been released a new version v2.2.1, include this change, you can try it now.

[ghost]

Works perfectly now .... thanks so much.

[PeachScript]

You are welcome!

[ymatuhin]

It's looks like you broke scrolling.

I have <infinite-loading :on-infinite="onInfinite" direction="top" ref="infiniteLoading"> <sw-spinner slot="spinner"></sw-spinner> </infinite-loading>.

In attemptLoad I see this line (this.$el.offsetWidth + this.$el.offsetHeight) > 0) which always false because this.$el refers me to infinite-loading-container which has 0 width and height and never emit infinite event.

[PeachScript]

@ymatuhin what is your situation that use the container which has 0 width and height as the scroll wrapper?

[ymatuhin]

My container has positive width and height. this.$el refers not to my container, it refers to <infinite-loading :on-infinite="onInfinite" direction="top" ref="infiniteLoading"> <sw-spinner slot="spinner"></sw-spinner> </infinite-loading>

[PeachScript]

I see, recommend you use the force-use-infinite-wrapper feature, more details here.

[ymatuhin]

I tried, but it didn't help me. this.$el inside attemptLoad still refers me to class="infinite-loading-container".

[ymatuhin]

Maybe instead $el should be this.scrollParent?

[PeachScript]

@ymatuhin oh, I thought we had been discussing this.scrollParent, sorry. this.$el should be related to the class="infinite-loading-container", is there something cause this.$el has 0 width and height?