jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use react query to cache myles query

Browse Source 
Summary: The call to myles was a little slow and very cachable so use react query. Additionally it depends on VPN / light so added an error state to make that clear.

Reviewed By: lblasa

Differential Revision: D42990344

fbshipit-source-id: 8d6ad20aea79f1972a7cf1f61f8af729e5f3464f
This commit is contained in:
Luke De Feo
2023-02-03 04:38:51 -08:00
committed by Facebook GitHub Bot
parent 64a6c651e7
commit df9b0a6aa6
4 changed files with 155 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
desktop/plugins/public/ui-debugger/components/main.tsx
View File

@@ -24,6 +24,8 @@ import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers';
import {Inspector} from './sidebar/Inspector';
import {Controls} from './Controls';
import {Spin} from 'antd';
import {QueryClientProvider} from 'react-query';
import {Tree2} from './Tree';
export function Component() {
@@ -45,46 +47,48 @@ export function Component() {
if (rootId) {
return (
<Layout.Container grow padh="small" padv="medium">
<Controls />
<Layout.Horizontal grow pad="small" gap="small">
<Layout.Container grow gap="small">
<Layout.ScrollContainer>
<Tree2
<QueryClientProvider client={instance.queryClient}>
<Layout.Container grow padh="small" padv="medium">
<Controls />
<Layout.Horizontal grow pad="small" gap="small">
<Layout.Container grow gap="small">
<Layout.ScrollContainer>
<Tree2
selectedNode={selectedNode}
onSelectNode={setSelectedNode}
nodes={nodes}
rootId={rootId}
/>
</Layout.ScrollContainer>
</Layout.Container>
<ResizablePanel
position="right"
minWidth={200}
width={visualiserWidth}
maxWidth={800}
onResize={(width) => {
setVisualiserWidth(width);
}}
gutter>
<Visualization2D
rootId={rootId}
width={visualiserWidth}
nodes={nodes}
selectedNode={selectedNode}
onSelectNode={setSelectedNode}
nodes={nodes}
rootId={rootId}
modifierPressed={ctrlPressed}
/>
</Layout.ScrollContainer>
</Layout.Container>
<ResizablePanel
position="right"
minWidth={200}
width={visualiserWidth}
maxWidth={800}
onResize={(width) => {
setVisualiserWidth(width);
}}
gutter>
<Visualization2D
rootId={rootId}
width={visualiserWidth}
nodes={nodes}
selectedNode={selectedNode}
onSelectNode={setSelectedNode}
modifierPressed={ctrlPressed}
/>
</ResizablePanel>
<DetailSidebar width={350}>
<Inspector
metadata={metadata}
node={selectedNode ? nodes.get(selectedNode) : undefined}
/>
</DetailSidebar>
</Layout.Horizontal>
</Layout.Container>
</ResizablePanel>
<DetailSidebar width={350}>
<Inspector
metadata={metadata}
node={selectedNode ? nodes.get(selectedNode) : undefined}
/>
</DetailSidebar>
</Layout.Horizontal>
</Layout.Container>
</QueryClientProvider>
);
}