Fixed a bug in lazy loading. Fixed #639.

flatpak/com.github.ransome1.sleek.appdata.xml

@@ -9,7 +9,7 @@
   <developer_name>Robin Ahle</developer_name>
   <content_rating type="oars-1.1"/>
   <releases>
-    <release version="2.0.9-rc.2" date="2024-02-08"/>
+    <release version="2.0.9-rc.3" date="2024-02-08"/>
   </releases>
   <url type="homepage">https://github.com/ransome1/sleek</url>
   <url type="contact">https://github.com/ransome1/sleek/issues</url>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.9-rc.2",
+  "version": "2.0.9-rc.3",
   "main": "./src/main/main.tsx",
   "scripts": {
     "build": "concurrently \"yarn run peggy\" \"yarn run build:main\" \"yarn run build:renderer\"",

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.9-rc.2",
+  "version": "2.0.9-rc.3",
   "description": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "synopsis": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "keywords": [

snap/snapcraft.yaml

@@ -1,6 +1,6 @@
 name: sleek
 base: core20
-version: "2.0.9-rc.2"
+version: "2.0.9-rc.3"
 summary: todo.txt manager for Linux, free and open-source (FOSS)
 description: |
   sleek is an open-source (FOSS) todo manager based on the todo.txt syntax. Stripped down to only the most necessary features, and with a clean and simple interface, sleek aims to help you focus on getting things done.

src/renderer/App.tsx

@@ -82,6 +82,9 @@ const App = () => {
   }, [settings.language]);  
 
   useEffect(() => {
+    const windowHeight = window.innerHeight;
+    const calculatedRowCount = Math.floor(windowHeight / 35);
+    setVisibleRowCount(calculatedRowCount * 1.5);
     ipcRenderer.send('requestData');
   }, []);
 

src/renderer/Drawer/Attributes.scss

@@ -62,7 +62,6 @@
 			cursor: pointer;
 		}
 		.MuiBadge-badge {
-			width: 0.5em;
 			z-index: 10;
 			font-weight: bold;
 			font-size: 0.75em;

src/renderer/Grid/Grid.tsx

@@ -34,8 +34,9 @@ const GridComponent: React.FC<GridComponentProps> = memo(({
  }) => {
 
   const list = document.getElementById('grid');
-  const totalRowCount = todoObjects?.length || 0;
   const groups = new Array;
+  const visibleTodoObjects = todoObjects?.filter(todoObject => todoObject.visible !== false)?.slice(0, visibleRowCount);
+  const totalRowCount = todoObjects?.length || 0;
 
   const handleButtonClick = (key: string, value: string) => {
     handleFilterSelect(key, value, filters, false);
@@ -87,8 +88,6 @@ const GridComponent: React.FC<GridComponentProps> = memo(({
     }
   };
 
-  const visibleTodoObjects = todoObjects?.filter(todoObject => todoObject.visible !== false);
-
   if(visibleTodoObjects.length === 0) return null;
 
   return (

src/renderer/Grid/Renderer.tsx

@@ -78,9 +78,10 @@ const RendererComponent = ({ todoObject, filters, settings, handleButtonClick })
 
 					modifiedChild = reactStringReplace(modifiedChild, pattern, (match, i) => {
 
-						const selected = filters && type !== null && (filters[type as keyof Filters] || []).some((filter: Filter) => filter.value === match);	
+						const selected = filters && type !== null && (filters[type as keyof Filters] || []).some((filter: Filter) => filter.value === match);
+
 						return (
-							<span key={`${type}-${i}`} className={selected ? 'filter selected' : 'filter'} data-todotxt-attribute={type}>
+							<span className={selected ? 'filter selected' : 'filter'} data-todotxt-attribute={type}>
 								{replacements[type](match, type)}
 							</span>
 						);