From 783634382900b925c75b0fb2330ffa4173f6e546 Mon Sep 17 00:00:00 2001
From: Simon Chan <cnsimonchan@live.com>
Date: Sat, 26 Sep 2020 16:22:24 +0800
Subject: [PATCH] fix(demo): don't pull framebufer when page not visible

---
 packages/demo/src/index.tsx  |  8 +++++++-
 packages/demo/src/router.tsx | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/demo/src/index.tsx b/packages/demo/src/index.tsx
index 85fbf610..7aa3b6c0 100644
--- a/packages/demo/src/index.tsx
+++ b/packages/demo/src/index.tsx
@@ -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>
                             ))}
diff --git a/packages/demo/src/router.tsx b/packages/demo/src/router.tsx
index cff3c7f1..60e22fb3 100644
--- a/packages/demo/src/router.tsx
+++ b/packages/demo/src/router.tsx
@@ -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;
     }