fix(demo): don't pull framebufer when page not visible

This commit is contained in:
Simon Chan 2020-09-26 16:22:24 +08:00
parent 1dc1c44481
commit 7836343829
2 changed files with 16 additions and 2 deletions

View file

@ -24,6 +24,8 @@ interface RouteInfo {
name: string;
children: JSX.Element | null;
noCache?: boolean;
}
function App(): JSX.Element | null {
@ -84,6 +86,7 @@ function App(): JSX.Element | null {
{
path: '/framebuffer',
name: 'Screen Capture',
noCache: true,
children: (
<FrameBuffer device={device} />
),
@ -119,7 +122,10 @@ function App(): JSX.Element | null {
<StackItem grow styles={{ root: { minHeight: 0, overflow: 'hidden' } }}>
<CacheSwitch>
{routes.map<React.ReactElement>(route => (
<CacheRoute exact={route.exact} path={route.path}>
<CacheRoute
exact={route.exact}
path={route.path}
noCache={route.noCache}>
{route.children}
</CacheRoute>
))}

View file

@ -14,7 +14,11 @@ export const RouteStackProps: IStackProps = {
styles: { root: { overflow: 'auto' } },
};
export const CacheRoute = withDisplayName('CacheRoute', (props: RouteProps) => {
export interface CacheRouteProps extends RouteProps {
noCache?: boolean;
}
export const CacheRoute = withDisplayName('CacheRoute', (props: CacheRouteProps) => {
const match = useRouteMatch(props);
const everMatched = useRef(!!match);
@ -30,6 +34,10 @@ export const CacheRoute = withDisplayName('CacheRoute', (props: RouteProps) => {
),
}), [!!match]);
if (props.noCache && !match) {
return null;
}
if (!everMatched.current) {
return null;
}