Hierarchy Search - is very slow. #1229
Comments
|
I've moved this issue to PCUI since it's not specific to the Editor. |
|
I just hacked the TreeView example to generate 11,111 TreeViewItems: <!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI TreeView</title>
<meta charset="utf-8">
<style>
body {
background-color: #364346;
}
.font-regular, .font-bold, .font-thin, .font-light {
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.pcui-treeview-item-text,
.pcui-treeview-item-icon {
font-size: 14px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "https://cdn.jsdelivr.net/npm/@playcanvas/observer/+esm",
"@playcanvas/pcui": "http://localhost:3000/dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "http://localhost:3000/styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { TreeView, TreeViewItem, TextInput, Container } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const container = new Container({
flex: true,
flexDirection: 'column',
width: '100%'
});
const filter = new TextInput({
keyChange: true,
placeholder: 'Filter',
width: '200px'
});
filter.on('change', (value) => {
treeView.filter = value;
});
const treeView = new TreeView({
allowRenaming: true
});
const root = new TreeViewItem({
text: 'Root'
});
treeView.append(root);
const generateChildren = (parent, depth) => {
if (depth > 0) {
for (let i = 0; i < 10; i++) {
const item = new TreeViewItem({
text: 'Item ' + i
});
parent.append(item);
generateChildren(item, depth - 1);
}
}
};
generateChildren(root, 4);
container.append(filter);
container.append(treeView);
document.body.appendChild(container.dom);
</script>
</body>
</html>I really don't see any meaningful lags. Can we isolate what you're seeing in a simple example like this? |
|
Hi @willeastcott, not sure if it is PCUI related, it could be the way Editor uses that TreeView and the complexity of other things.
Here is a video with lags of 2-3-5 seconds on selection, with freezes after selection, notice how hovering does not appear on tree items and it constantly freezes whole tab. hiearchy-search-lags.mp4 |
|
LOL, OK, I've moved the issue back to the |
Previously searching through hierarchy was pretty fine, but I've noticed it was changed the way the results are visualised in DOM, which results in massive lag spikes (500-2000ms stalls) when scrolling or even selecting elements from the results list.
Here are the reasons:
contain, which can help a to instruct a browser of how element can change its size and affects rendering, which can speed up relayout and rendering by browsers significantly.What can be done:
The text was updated successfully, but these errors were encountered: