fix scrolling

packages/app-desktop/gui/NoteList/NoteList2.tsx

@@ -47,7 +47,7 @@ const NoteList = (props: Props) => {
 		listRef
 	);
 
-	const [itemsPerLine, startNoteIndex, endNoteIndex, startLineIndex, endLineIndex, totalLineCount, visibleItemCount] = useVisibleRange(
+	const [, startNoteIndex, endNoteIndex, startLineIndex, endLineIndex, totalLineCount, visibleItemCount] = useVisibleRange(
 		scrollTop,
 		props.size,
 		itemSize,
@@ -166,24 +166,22 @@ const NoteList = (props: Props) => {
 		return [];
 	}, [props.notesParentType, props.searches, props.selectedSearchId, props.highlightedWords]);
 
-	const renderFiller = (elements: JSX.Element[], keyPrefix: string, width: number, height: number) => {
-		for (let i = 0; i < itemsPerLine; i++) {
-			elements.push(<div key={keyPrefix + i} style={{ width, height }}></div>);
-		}
-	};
-
 	const renderEmptyList = () => {
 		if (props.notes.length) return null;
 		return <div className="emptylist">{props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
 	};
 
+	const renderFiller = (key: string, style: React.CSSProperties) => {
+		if (!props.notes.length) return null;
+		if (style.height <= 0) return null;
+		return <div key={key} style={style}></div>;
+	};
+
 	const renderNotes = () => {
 		if (!props.notes.length) return null;
 
 		const output: JSX.Element[] = [];
 
-		renderFiller(output, 'top', itemSize.width, startLineIndex * itemSize.height);
-
 		for (let i = startNoteIndex; i <= endNoteIndex; i++) {
 			const note = props.notes[i];
 			const renderedNote = renderedNotes[note.id];
@@ -211,22 +209,42 @@ const NoteList = (props: Props) => {
 			);
 		}
 
-		renderFiller(output, 'bottom', itemSize.width, (totalLineCount - endLineIndex - 1) * itemSize.height);
-
 		return output;
 	};
 
+	const topFillerHeight = startLineIndex * itemSize.height;
+	const bottomFillerHeight = (totalLineCount - endLineIndex - 1) * itemSize.height;
+
+	const fillerBaseStyle = useMemo(() => {
+		// return { width: 'auto', border: '1px solid red', backgroundColor: 'green' };
+		return { width: 'auto' };
+	}, []);
+
+	const topFillerStyle = useMemo(() => {
+		return { ...fillerBaseStyle, height: topFillerHeight };
+	}, [fillerBaseStyle, topFillerHeight]);
+
+	const bottomFillerStyle = useMemo(() => {
+		return { ...fillerBaseStyle, height: bottomFillerHeight };
+	}, [fillerBaseStyle, bottomFillerHeight]);
+
 	return (
-		<div
-			className="note-list"
-			style={noteListStyle}
-			ref={listRef}
-			onScroll={onScroll}
-			onKeyDown={onKeyDown}
-			onDrop={onDrop}
-		>
-			{renderEmptyList()}
-			{renderNotes()}
+		<div>
+			<div
+				className="note-list"
+				style={noteListStyle}
+				ref={listRef}
+				onScroll={onScroll}
+				onKeyDown={onKeyDown}
+				onDrop={onDrop}
+			>
+				{renderEmptyList()}
+				{renderFiller('top', topFillerStyle)}
+				<div className="notes">
+					{renderNotes()}
+				</div>
+				{renderFiller('bottom', bottomFillerStyle)}
+			</div>
 		</div>
 	);
 };

packages/app-desktop/gui/NoteList/style.scss

@@ -1,12 +1,15 @@
 .note-list {
-	display: flex;
-	flex-flow: row wrap; // TODO: Dynamic
 	width: 100%;
 	height: 100%;
 	background-color: var(--joplin-background-color3);
 	border-right: 1px solid var(--joplin-divider-color);
 	overflow-y: scroll;
 
+	> .notes {
+		display: flex;
+		flex-flow: row wrap; // TODO: Dynamic
+	}
+
 	> .emptylist {
 		padding: 10px;
 		font-size: var(--joplin-font-size);

packages/app-desktop/gui/NoteList/utils/defaultLeftToRightListRenderer.ts

@@ -124,7 +124,7 @@ const defaultLeftToRightItemRenderer: ListRenderer = {
 			{{/note.is_todo}}	
 			<a href="#" class="title" draggable="true" data-id="{{note.id}}">
 				<i class="watchedicon fa fa-share-square"></i>
-				<span>{{{note.titleHtml}}}</span>
+				<span>{{item.index}} {{{note.titleHtml}}}</span>
 			</a>
 		</div>
 	`,

packages/app-desktop/gui/NoteList/utils/useScroll.ts

@@ -113,7 +113,6 @@ const useScroll = (noteCount: number, itemSize: Size, listSize: Size, listRef: R
 		// Ignore the scroll event if it has just been set programmatically.
 		if (Date.now() - lastScrollSetTime.current < 100) return;
 		setScrollTop(event.target.scrollTop);
-		lastScrollSetTime.current = Date.now();
 	}, []);
 
 	return {

packages/app-desktop/gui/NoteListItem/NoteListItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, forwardRef, LegacyRef, ChangeEvent, CSSProperties, MouseEventHandler, DragEventHandler, useMemo } from 'react';
+import { useCallback, forwardRef, LegacyRef, ChangeEvent, CSSProperties, MouseEventHandler, DragEventHandler, useMemo, memo } from 'react';
 import { ItemFlow, OnChangeHandler } from '../NoteList/utils/types';
 import { Size } from '@joplin/utils/types';
 import useRootElement from './utils/useRootElement';
@@ -88,4 +88,4 @@ const NoteListItem = (props: NoteItemProps, ref: LegacyRef<HTMLDivElement>) => {
 	></div>;
 };
 
-export default forwardRef(NoteListItem);
+export default memo(forwardRef(NoteListItem));