convert Suspense to SuspenseWithPerf

reactfire/components.tsx

@@ -28,6 +28,7 @@ export function SuspenseWithPerf({
 
       if (trace && !traceStarted) {
         trace.start();
+        console.log(`started trace ${traceId}`);
         setTraceStarted(true);
       }
     });
@@ -39,6 +40,7 @@ export function SuspenseWithPerf({
     useLayoutEffect(() => {
       if (trace && traceStarted && !traceCompleted) {
         trace.stop();
+        console.log(`stopped trace ${traceId}`);
         setTraceCompleted(true);
       }
     });

sample-simple/src/Auth.js

@@ -1,5 +1,6 @@
 import firebase from 'firebase/app';
 import 'firebase/auth';
+import '@firebase/performance';
 import React from 'react';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import { SuspenseWithPerf, useUser } from 'reactfire';

sample-simple/src/Firestore.js

@@ -1,6 +1,7 @@
 import firebase from 'firebase/app';
 import 'firebase/auth';
 import 'firebase/firestore';
+import '@firebase/performance';
 import React, { useState } from 'react';
 import {
   AuthCheck,

sample-simple/src/RealtimeDatabase.js

@@ -1,8 +1,14 @@
 import firebase from 'firebase/app';
 import 'firebase/auth';
 import 'firebase/database';
-import React, { Suspense, useState } from 'react';
-import { useDatabaseList, useDatabaseObject, useUser } from 'reactfire';
+import '@firebase/performance';
+import React, { useState } from 'react';
+import {
+  AuthCheck,
+  SuspenseWithPerf,
+  useDatabaseList,
+  useDatabaseObject
+} from 'reactfire';
 
 const Counter = props => {
   const ref = firebase.database().ref('counter');
@@ -80,35 +86,23 @@ const List = props => {
   );
 };
 
-const AuthCheck = props => {
-  const user = useUser(firebase.auth());
-
-  // TODO: check props.requiredClaims
-
-  if (!user) {
-    return props.fallback;
-  } else {
-    return props.children;
-  }
-};
-
 const SuspenseWrapper = props => {
   return (
-    <Suspense fallback="loading...">
+    <SuspenseWithPerf
+      fallback="loading..."
+      traceId="RTDB-root"
+      firePerf={firebase.performance()}
+    >
       <AuthCheck
         fallback="sign in to use Realtime Database"
-        requiredClaims={[]}
+        auth={firebase.auth()}
       >
         <h3>Sample Object Listener</h3>
-        <Suspense fallback="connecting to Realtime Database...">
-          <Counter />
-        </Suspense>
+        <Counter />
         <h3>Sample List Listener</h3>
-        <Suspense fallback="connecting to Realtime Database...">
-          <List />
-        </Suspense>
+        <List />
       </AuthCheck>
-    </Suspense>
+    </SuspenseWithPerf>
   );
 };
 

sample-simple/src/Storage.js

@@ -1,8 +1,14 @@
 import firebase from 'firebase/app';
 import 'firebase/auth';
 import 'firebase/storage';
-import React, { Suspense, useState } from 'react';
-import { useStorageTask, useUser, useStorageDownloadURL } from 'reactfire';
+import '@firebase/performance';
+import React, { useState } from 'react';
+import {
+  SuspenseWithPerf,
+  useStorageDownloadURL,
+  useStorageTask,
+  useUser
+} from 'reactfire';
 
 const DownloadImage = () => {
   const demoImagePath = 'Cloud Storage for Firebase (Independent Icon).png';
@@ -58,9 +64,13 @@ const ImageUploadButton = props => {
     <>
       <input type="file" accept="image/png, image/jpeg" onChange={onChange} />
       {uploadTask ? (
-        <Suspense fallback="waiting for progress...">
+        <SuspenseWithPerf
+          fallback="waiting for progress..."
+          traceId="storage-upload"
+          firePerf={firebase.performance()}
+        >
           <UploadProgress uploadTask={uploadTask} storageRef={ref} />
-        </Suspense>
+        </SuspenseWithPerf>
       ) : (
         ''
       )}
@@ -82,13 +92,17 @@ const AuthCheck = props => {
 
 const SuspenseWrapper = props => {
   return (
-    <Suspense fallback="loading...">
+    <SuspenseWithPerf
+      fallback="loading..."
+      traceId="storage-root"
+      firePerf={firebase.performance()}
+    >
       <AuthCheck fallback="sign in to use Storage">
         <DownloadImage />
         <br />
         <ImageUploadButton />
       </AuthCheck>
-    </Suspense>
+    </SuspenseWithPerf>
   );
 };