Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.78k stars 916 forks source link

loading in place of white screen #82

Open xerosanyam opened 6 years ago

xerosanyam commented 6 years ago

if we scroll the screen fast, we get to see a blank screen. is it possible to show Loading.. somehow?

Akryum commented 6 years ago

I think by the time we are able to render "Loading" it will actually render the items.

xerosanyam commented 6 years ago

I think, time to render the items will depend on:

  1. number of nested elements that it has to load
  2. cpu power

time to render "Loading" should be far lesser than time to render nested element.

Akryum commented 5 years ago

Drawing a frame isn't selective, everything will be rendered.

nicolaskopp commented 1 year ago

Hey!

I added a loading indicator like this:

Template:


            <div class="loader" v-show="isLoading">Some Styled loading Gif...</div>
            <RecycleScroller :items="XXX"
                             :emit-update="true"
                             @update="handleLoadingIndicator"
                             @scroll-start="isLoading=false"
                             @scroll-end="isLoading=false"
                             :buffer="0">
              <template slot-scope="{ item, index }">
                   <Item>...</Item>
              </template>
            </RecycleScroller>

JS (Vue):

  data() {
    return {
      isLoading: false,
    };
  },

/* ... */

  mounted() {
    this.debounceLoadingCancel = debounce(() => {
      this.isLoading = false;
    }, 500);
  },

/* ... */

  methods: {
    handleLoadingIndicator() {
      if (!this.isLoading) {
        this.isLoading = true;
      }
      this.debounceLoadingCancel();
    },
  }
guaziing commented 1 year ago

Its useless, What a pity! As long as it is loaded, it will load.

guaziing commented 1 year ago

https://github.com/zrj570543941/custome-scroll This project can slow down scrolling. Can you learn from it? Check the source code, I don't know where to start.