A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists

Overview

Lazy Load List

Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists.

Rendering large lists makes the first load slow especially if items contain images, so this package split the list to small lists then it renders them one by one when scrolling to the end of the list..

you can notice the deference here:

loading performance deference

Demo

you can find the source code of examples in examples folder

Features

  • Fast Loading 🚀
  • Lightweight package
  • Better user experience
  • Supports most loved JS frameworks

Supported Frameworks

| svelte logo | Svete js     | ✅
| svelte | Vue js (2,3) | ✅
| svelte | React js     | coming soon..

Installation

install the package using npm or yarn:

install using npm

$ npm i lazy-load-list

or using yarn

$ yarn add lazy-load-list

Usage

you must wrap the list by div and specify the height and width in the wrapper div.

  • svelte logo svelte js:

{ item }

">
import LazyList from 'lazy-load-list/svelte'


  

{ item }

  • svelte vue js:
// script import LazyList from 'lazy-load-list/vue' .. components: { LazyList } // don't forget to define it in the components">

  
// script import LazyList from 'lazy-load-list/vue' .. components: { LazyList } // don't forget to define it in the components

Props

prop description required default value
data the item array yes []
itemsPerRender items to be rendered per load yes 3
containerClasses list container classes for CSS no ''
defaultLoading to show the default loading or not no true
defaultLoadingColor color of the default loading no '#18191A'
You might also like...
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

🐌 vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

simple calculation lib with lazy feature 🎲➕➖➗✖️
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter 💅

A Vue lazy loading directive.

A Vue lazy loading directive.

Comments
  • Missing lib/Loading.css

    Missing lib/Loading.css

    Description

    After npm install, the following error appears:

    ERROR  Failed to compile with 1 error  
    
    This relative module was not found:
    * ../lib/loading.css in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./node_modules/lazy-load-list/vue/LazyList.vue?vue&type=script&lang=js
    

    As the error suggests, the loading.css file is missing from the lib directory. Judging from older versions of this, the code used to be in the Loading modules but was moved to an independent file which was never added to git.

    Suggested fix

    Create a new file called lib/loading.css with the following:

    .dots {
        width: 3.5em;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
    }
    
    .dots div {
        width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
        animation: fade 0.8s ease-in-out alternate infinite;
    }
    
    .dots div:nth-of-type(1) {
        animation-delay: -0.4s;
    }
    
    .dots div:nth-of-type(2) {
        animation-delay: -0.2s;
    }
    
    @keyframes fade {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    
    opened by p0rridg3 2
  • [Error] You may need an appropriate loader to handle this file type

    [Error] You may need an appropriate loader to handle this file type

    Hello, Mr. Omar Thanks for your hard work, But I have a little problem.

    I tried to use 'lazy-load-list' in electron app (with nextron), And I got this error Screenshot_20220404_023527

    After some search, I think this to be related to webpack. So, Is there anything which can I do to solve this problem?

    Code :

    import LazyList from "lazy-load-list/react";
    import { useState, useEffect, useRef } from "react";
    
    import {
    	Alert,
    	AlertIcon,
    	AlertTitle,
    	AlertDescription,
    	Button,
    	IconButton,
    	Box,
    	Tooltip,
    	Flex,
    	Spinner,
    	HStack,
    	Stack,
    	Input,
    	InputRightElement,
    	InputGroup,
    	Heading,
    	Select,
    } from "@chakra-ui/react";
    
    import {
    	HiTrash,
    	HiRefresh,
    	HiOutlineInformationCircle,
    	HiSearch,
    	HiX,
    } from "react-icons/hi";
    import LogsProvider, { useLogs } from "@Context/logs";
    
    const NUMBER_OF_MESSAGES = 100;
    
    function Logs() {
    	const { logs, GetLogs, ClearLogs, isLoading } = useLogs();
    
    	const [StatusFilter, setStatusFilter] = useState("all");
    	const [LogsAfterFiltering, setLogsAfterFiltering] = useState(
    		logs?.lines ?? [],
    	);
    
    	const [search, setSearch] = useState({ bool: false, value: "" });
    	useEffect(() => GetLogs(), []); // * Get Logs when user open the modal
    
    	useEffect(() => {
    		setLogsAfterFiltering(
    			logs?.lines?.filter((line) => {
    				if (StatusFilter === "all") return true;
    				return line.status === StatusFilter && line;
    			}),
    		);
    	}, [StatusFilter, logs]);
    
    	useEffect(() => {
    		setLogsAfterFiltering(
    			logs?.lines.filter(
    				(line) =>
    					line.content.toLowerCase().includes(search.value.toLowerCase()) &&
    					(line.status === StatusFilter || StatusFilter === "all"),
    			),
    		);
    	}, [search.value, logs]);
    
    	// useEffect(() => console.log("search update to", search), [search]); // ! For Debugging
    	// useEffect(() => console.log("logs update to", logs), [logs]); // ! For Debugging
    	// useEffect(() => console.log("LogsAfterFiltering update to", LogsAfterFiltering), [LogsAfterFiltering]); // ! For Debugging
    
    	return (
    		<>
    			<Flex w='full' justify='space-between' my={3}>
    				<HStack>
    					<Tooltip
    						hasArrow
    						placement='right'
    						label={`Logs stored in ${logs.path}`}>
    						<IconButton
    							variant='ghost'
    							cursor='default'
    							icon={<HiOutlineInformationCircle size='1.3em' />}
    						/>
    					</Tooltip>
    				</HStack>
    
    				<HStack justify='end' spacing={3}>
    					<Select
    						maxW='150px'
    						value={StatusFilter}
    						variant='filled'
    						onChange={(e) => setStatusFilter(e.target.value)}>
    						<option value='all'>All {logs?.lines?.length}</option>
    						<option value='info'>
    							Info{" "}
    							{logs?.lines?.filter((line) => line.status === "info").length}
    						</option>
    						<option value='warning'>
    							Warning{" "}
    							{logs?.lines?.filter((line) => line.status === "warning").length}
    						</option>
    						<option value='error'>
    							Error{" "}
    							{logs?.lines?.filter((line) => line.status === "error").length}
    						</option>
    					</Select>
    					{search.bool ? (
    						<InputGroup w='200px'>
    							<Input
    								placeholder='Search'
    								variant='filled'
    								value={search.value}
    								onChange={(e) =>
    									setSearch({ ...search, value: e.target.value })
    								}
    							/>
    							<InputRightElement>
    								{search.value ? (
    									<IconButton
    										variant='none'
    										icon={<HiX size='1.4em' />}
    										onClick={() => setSearch({ ...search, value: "" })}
    									/>
    								) : (
    									<IconButton
    										variant='none'
    										icon={<HiSearch size='1.4em' />}
    										onClick={() => setSearch({ ...search, bool: !search.bool })}
    									/>
    								)}
    							</InputRightElement>
    						</InputGroup>
    					) : (
    						<Tooltip label='Search in logs'>
    							<IconButton
    								variant='ghost'
    								icon={<HiSearch size='1.4em' />}
    								onClick={() => setSearch({ ...search, bool: !search.bool })}
    							/>
    						</Tooltip>
    					)}
    
    					<Button leftIcon={<HiRefresh />} onClick={() => GetLogs()}>
    						Refresh
    					</Button>
    					<Button
    						leftIcon={<HiTrash />}
    						colorScheme='red'
    						onClick={() => ClearLogs()}>
    						Clear All
    					</Button>
    				</HStack>
    			</Flex>
    			<Stack spacing={1}>
    				{isLoading ? (
    					<Spinner
    						size='xl'
    						color='green'
    						alignSelf='center'
    						justifySelf='center'
    					/>
    				) : !(LogsAfterFiltering.length > 0) ? (
    					<Heading size='md' alignSelf='center'>
    						No logs found
    					</Heading>
    				) : (
    					<LogRows
    						data={LogsAfterFiltering.slice(
    							0,
    							Math.min(LogsAfterFiltering.length, NUMBER_OF_MESSAGES),
    						)}
    					/>
    				)}
    			</Stack>
    		</>
    	);
    }
    
    function LogAlert({ item, index }) {
    	const { status, date, content } = item;
    	const availableTypes = ["warning", "error", "info"];
    
    	return (
    		<Alert
    			key={index}
    			status={availableTypes.includes(status) ? status : "warning"}>
    			<AlertIcon />
    			<Box flex={1}>
    				<AlertTitle mr={2}>{date}</AlertTitle>{" "}
    				<AlertDescription>{content}</AlertDescription>
    			</Box>
    		</Alert>
    	);
    }
    
    const LogRows = ({ data }) => {
    	const listRef = useRef(null);
    	const ref = useRef(null);
    
    
    
    	return (
    		<Box ref={ref}>
    			<LazyList
    				data={data}
    				itemsPerRender={15}
    				defaultLoadingColor='#222'
    				renderItem={LogAlert}
    			/>
    			
    		</Box>
    	);
    };
    
    function LogsComponent() {
    	return (
    		<LogsProvider>
    			<Logs />
    		</LogsProvider>
    	);
    }
    
    export default LogsComponent;
    
    
    opened by Hulxv 3
Owner
OMER ANWAR
OMER ANWAR
The easiest way to lazy load your content

VueLazily The easiest way to lazy load your content. Inspired by vue-promised, recommend to look at it if you need loading/errors handling without laz

Enkot 6 Aug 31, 2022
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

Bukwild 56 Sep 9, 2022
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

Ademola. 98 Apr 24, 2021
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
Create lazy image, embed, video and element with animation just with attributes.

?? Lazy-attr v1.2.3 Create lazy loading request or element like image, iframe, video... Make custom animation on lazy and not lazy element on all brow

null 1 Jan 4, 2022
A vue component for sleek and optimal lazy loading

sloth-loader ?? Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

Kenny Krosky 0 Oct 21, 2021
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

null 5 Sep 25, 2022
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 60 Mar 28, 2022
simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

Norman 25 Aug 11, 2021