Vue 3 infinity loading component

Overview

vue-eternal-loading Build Status

Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies.

Features:

  • 4 directional ( top / left / right / bottom)
  • 4 loading states ( loading / no-more / no-results / error )
  • Custom markup & styles
  • Works in browsers & bundlers

Installation:

Yarn

yarn add @ts-pro/vue-eternal-loading

Npm

npm install @ts-pro/vue-eternal-loading

Browser

<head>
    <!-- Vue 3 must be loaded before `vue-eternal-loading` -->
    <script src="https://cdn.jsdelivr.net/gh/ts-pro/vue-eternal-loading/dist/vue-eternal-loading.umd.js"></script>
</head>

Simple usage:

<VueEternalLoading :load="load"></VueEternalLoading>
const PAGE_SIZE = 5;

// We must pass this method to the component 
// and it will be call automatically when needed
async function load({ loaded }) {
  // Load your data from server or anywhere
  const loadedItems = await loadItems(page);
  items.value.push(...loadedItems);
  page += 1;
  // Call `loaded` callback with 2 arguments:
  // 1. How many items we have loaded
  // 2. Our page size to know when we riched the end
  loaded(loadedItems.length, PAGE_SIZE);
}

Guide & demo:

Check out our vue-eternal-loading docs

Releases

List releases vue-eternal-loading releases

Vue2 support

Our component is for Vue 3, if you are looking solution for Vue 2 - check this lib out vue-infinite-loading.

Issue

Feel free to write an issue or feature request vue-eternal-loading issues

License

MIT License

Comments
  • Issue when building for production with Vite

    Issue when building for production with Vite

    I encountered a strange behaviour when migrating a large app to Vite. Recreated it in a demo app.

    Demo: https://vue-eternal-loading-vite-test.surge.sh/ Sources: https://github.com/andgudovich/vue-eternal-loading-vite-test

    There are 2 identical pages in the demo. If we click "Cats 2" link first, the library won't be loaded on this page. But if we open "Cats 1" page and then "Cats 2" - everything works fine.

    1. The issue depends on the order in routes array and on the usage of component: () => import('@/views/PageName.vue').
    2. This problem isn't present on localhost.
    3. Vite's build target is the lowest possible - "es2015". Changing the target is not helping.
    4. No errors/warnings in the console
    help wanted 
    opened by andrei-hudovich 6
  • Nuxt integration error

    Nuxt integration error

    WARN [SSR] Error transforming myPage.vue: Failed to resolve entry for package "@ts-pro/vue-eternal-loading". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "@ts-pro/vue-eternal-loading" package

    bug 
    opened by Lanayx 4
  • Build error with Vite because of preserveValueImports, isolatedModule and importsNotUsedAsValues tsconfig options

    Build error with Vite because of preserveValueImports, isolatedModule and importsNotUsedAsValues tsconfig options

    When building my app with vite, TS throws type errors because both preserveValueImports and isolatedModules are on, as well as another error because importsNotUsedAsValues is on.

    $ vue-tsc --noEmit && vite build
    node_modules/@ts-pro/vue-eternal-loading/src/components/VueEternalLoading/VueEternalLoading.vue:26:3 - error TS1444: 'PropType' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
    
    26   PropType,
         ~~~~~~~~
    
    node_modules/@ts-pro/vue-eternal-loading/src/components/VueEternalLoading/VueEternalLoading.vue:37:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
    
    37 import { LoadAction, LoadPayload, Position, State } from './helpers/type/type';
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    node_modules/@ts-pro/vue-eternal-loading/src/components/VueEternalLoading/VueEternalLoading.vue:37:10 - error TS1444: 'LoadAction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
    
    37 import { LoadAction, LoadPayload, Position, State } from './helpers/type/type';
                ~~~~~~~~~~
    
    node_modules/@ts-pro/vue-eternal-loading/src/components/VueEternalLoading/VueEternalLoading.vue:37:22 - error TS1444: 'LoadPayload' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
    
    37 import { LoadAction, LoadPayload, Position, State } from './helpers/type/type';
                            ~~~~~~~~~~~
    
    node_modules/@ts-pro/vue-eternal-loading/src/components/VueEternalLoading/VueEternalLoading.vue:37:35 - error TS1444: 'Position' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
    
    37 import { LoadAction, LoadPayload, Position, State } from './helpers/type/type';
                                         ~~~~~~~~
    
    node_modules/@ts-pro/vue-eternal-loading/src/components/VueEternalLoading/VueEternalLoading.vue:37:45 - error TS1444: 'State' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
    
    37 import { LoadAction, LoadPayload, Position, State } from './helpers/type/type';
                                                   ~~~~~
    Found 6 errors.
    

    I have temporarily avoided this issues by adding "compilerOptions": { "preserveValueImports": false, "importsNotUsedAsValues": "preserve" }, to my tsconfig.json, but this will probably cause further issues down the line and shouldn't be needed, as those TS options are now default and intended Vite behaviour.

    I'm not an expert at this but from what I understand, this error is because of imports not using the type keyword when they should, which would allow typescript and vite to compile this properly with both preserveValueImports and isolatedModules.

    bug 
    opened by QuentinLeCaignec 2
  • Build Error

    Build Error

    The package fails to build.

    yarn run v1.22.17
    $ vue-cli-service build --target lib src/main.ts
    
    ⠇  Building for production as library (commonjs,umd,umd-min)...
    
     ERROR  Failed to compile with 1 error                                                                                                                               11:27:07
    
     error  in ./src/components/VueEternalLoading/VueEternalLoading.vue?vue&type=script&lang=ts
    
    Module parse failed: Unexpected token (42:57)
    File was processed with these loaders:
     * ./node_modules/cache-loader/dist/cjs.js
     * ./node_modules/thread-loader/dist/cjs.js
     * ./node_modules/babel-loader/lib/index.js
     * ./node_modules/ts-loader/index.js
     * ./node_modules/cache-loader/dist/cjs.js
     * ./node_modules/vue-loader-v16/dist/index.js
    You may need an additional loader to handle the result of these loaders.
    |       nextTick(() => {
    |         if (props.position === 'top') {
    >           restoreScrollVerticalPosition(props.container ?? document.documentElement, scrollSize);
    |         } else if (props.position === 'left') {
    |           restoreScrollHorizontalPosition(props.container ?? document.documentElement, scrollSize);
    
     @ ./src/components/VueEternalLoading/VueEternalLoading.vue?vue&type=script&lang=ts 1:0-400 1:0-400 1:401-790 1:401-790
     @ ./src/components/VueEternalLoading/VueEternalLoading.vue
     @ ./src/main.ts
     @ ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
    
    
    
     ERROR  Failed to compile with 1 error                                                                                                                               11:27:08
    
     error  in ./src/components/VueEternalLoading/VueEternalLoading.vue?vue&type=script&lang=ts
    
    Module parse failed: Unexpected token (42:57)
    File was processed with these loaders:
     * ./node_modules/cache-loader/dist/cjs.js
     * ./node_modules/thread-loader/dist/cjs.js
     * ./node_modules/babel-loader/lib/index.js
     * ./node_modules/ts-loader/index.js
     * ./node_modules/cache-loader/dist/cjs.js
     * ./node_modules/vue-loader-v16/dist/index.js
    You may need an additional loader to handle the result of these loaders.
    |       nextTick(() => {
    |         if (props.position === 'top') {
    >           restoreScrollVerticalPosition(props.container ?? document.documentElement, scrollSize);
    |         } else if (props.position === 'left') {
    |           restoreScrollHorizontalPosition(props.container ?? document.documentElement, scrollSize);
    
     @ ./src/components/VueEternalLoading/VueEternalLoading.vue?vue&type=script&lang=ts 1:0-400 1:0-400 1:401-790 1:401-790
     @ ./src/components/VueEternalLoading/VueEternalLoading.vue
     @ ./src/main.ts
     @ ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
    
    ⠋  Building for production as library (commonjs,umd,umd-min)...
    
     ERROR  Failed to compile with 1 error                                                                                                                               11:27:08
    
     error  in ./src/components/VueEternalLoading/VueEternalLoading.vue?vue&type=script&lang=ts
    
    Module parse failed: Unexpected token (42:57)
    File was processed with these loaders:
     * ./node_modules/cache-loader/dist/cjs.js
     * ./node_modules/thread-loader/dist/cjs.js
     * ./node_modules/babel-loader/lib/index.js
     * ./node_modules/ts-loader/index.js
     * ./node_modules/cache-loader/dist/cjs.js
     * ./node_modules/vue-loader-v16/dist/index.js
    You may need an additional loader to handle the result of these loaders.
    |       nextTick(() => {
    |         if (props.position === 'top') {
    >           restoreScrollVerticalPosition(props.container ?? document.documentElement, scrollSize);
    |         } else if (props.position === 'left') {
    |           restoreScrollHorizontalPosition(props.container ?? document.documentElement, scrollSize);
    
     @ ./src/components/VueEternalLoading/VueEternalLoading.vue?vue&type=script&lang=ts 1:0-400 1:0-400 1:401-790 1:401-790
     @ ./src/components/VueEternalLoading/VueEternalLoading.vue
     @ ./src/main.ts
     @ ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
    
     ERROR  Build failed with errors.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    
    opened by kolmez 1
  • Found non-callable @@iterator

    Found non-callable @@iterator

    Uncaught (in promise) TypeError: Found non-callable @@iterator at Proxy.load (explore.vue:131)

    when i use the components, just reference by demo

    image

    let page = 1;
    const PAGE_SIZE = 30;
    const load = async ({ loaded }: LoadAction) => {
      const loadedGames = await getListApi();
      gameList.value.push(...loadedGames);
      page += 1;
      loaded(loadedGames.length, PAGE_SIZE);
    };
    
    question 
    opened by littlecxm 1
Releases(v1.3.0)
Owner
TS Pro
TS Pro
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Sep 29, 2022
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 3 Jan 30, 2022
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 1.1k Sep 27, 2022
a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

zhoulin 88 Aug 12, 2022
Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Naufal Rabbani 140 Nov 28, 2021
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Lucas Leandro 758 Sep 19, 2022
An vuejs loading component ☄️

An vuejs loading component ☄️

Igor Souza Martins 19 Jul 27, 2022
Vuegister is a require hook for loading of the Vue.js single-file components (or *.vue files).

vuegister About Vuegister (a portmanteau for vue-register) is a require hook for loading of the Vue.js single-file components (or *.vue files). The ma

Aleksei Iatsiuk 13 Jun 9, 2022
A StealJS plugin for loading Vue.js Single File Components (.vue)

StealJS plugin for Vue.js Single File Components. Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle V

iCanJS 8 Apr 30, 2021
Vue-simple-loading: Fork styles from tobiasahlin/SpinKit and built it for vue

vue-simple-loading Thanks for tobiasahlin/SpinKit. The css3 animation is copied from it. All the things I do is built it as a vue component. This proj

Heath Yang 14 Dec 17, 2020
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

Guillaume Chau 403 Sep 20, 2022
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

Jeff 57 Apr 6, 2022
⏳ Loading inside a container or full screen for Vue.js

vue-element-loading ⏳ Loading inside a container or full screen for Vue.js ?? Document & Demo Page Docs & Live demo Fully feature live demo ?? Install

Pongsatorn 312 Sep 4, 2022
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

William Lindvall 39 Jun 29, 2022
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Pygmy Slow Loris 161 Jul 16, 2022
Just another collection of loading spinners with Vue.js, alot of spinners

vue-loading-spinner Just another collection of loading spinners with Vue.js Installation npm install --save vue-loading-spinner or yarn add vue-loadin

Duoc Nguyen 636 Sep 20, 2022
Vue directive for show loading block in any element.

vue-loading Vue directive for show loading block in any element. Live demo and usage Build by vue-cli and vue-cli-component Usage General usage <scrip

岛书 141 May 8, 2022
A plugin to handle the loading state within your Vue applications

A plugin to handle the loading state within your Vue applications

Optix Solutions 0 Nov 7, 2018