menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

NodeGui

A library for building cross-platform native desktop applications with Node.js and CSS.

Channels
Team

ScrollArea CPU usage

December 28, 2019 at 7:57pm

ScrollArea CPU usage

December 28, 2019 at 7:57pm (Edited 3 years ago)
Scrolling around using ScrollArea in react-nodegui leads to an eventual 100% CPU usage as per the macos monitor. My code is something like the following:
<ScrollArea style={styles.list}>
<View>
{values.map((val, i) => (
<View style={i % 2 !== 0 ? styles.rowAlternate : styles.row}>
{val.map((column, c) => (
<View style={styles.rowColumn + `width: ${headers[c].width}px;`}>
<Text>{column}</Text>
</View>
))}
</View>
))}
</View>
</ScrollArea>
I'm displaying about 75 rows
Of course scrolling looks a bit junky (low fps) and that's how I noticed the problem! Mine is a 15 inch MacBook pro (2017) running Mojave
Did anyone experience something similar? Any quickfixes? The next steps would be to file an issue on Github but I'd like an informal confirmation first :)

December 28, 2019 at 8:31pm
Added missing key props, still not better :/

December 29, 2019 at 3:51am
Thats super weird, i am running around 1500 items inside scrollview without cpu issues
Could you raise a issue on github with more details?
Ok, I just ran a test
import React from "react";
import { Renderer, Text, Window, ScrollArea, View } from "./index";
const values: string[][] = [["hello", "world"]];
for (let i = 0; i < 175; i += 1) {
values.push(["hello" + i, "world" + i]);
}
const headers: { width: number }[] = [
{
width: 100
},
{
width: 200
}
];
const styles = {
list: ``,
rowAlternate: `flex-direction: 'row';`,
row: `flex-direction: 'row';`,
rowColumn: ``
};
const App = () => {
return (
<Window>
<View style={containerStyle}>
<ScrollArea style={styles.list}>
<View>
{values.map((val, i) => (
<View
key={`r${i}`}
style={i % 2 !== 0 ? styles.rowAlternate : styles.row}
>
{val.map((column, c) => (
<View
key={`c${c}`}
style={styles.rowColumn + `width: ${headers[c].width}px;`}
>
<Text>{column}</Text>
</View>
))}
</View>
))}
</View>
</ScrollArea>
</View>
</Window>
);
};
const containerStyle = `
flex: 1;
justify-content:'center';
border: 1px solid blue;
padding: 10;
`;
Renderer.render(<App />);
The CPU jumps to 30% during rendering and then goes down to near 0, which is what is expected.
I am running MacOS Catalina and latest NodeGui version