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;
    }
}

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

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;