diff --git a/reactfire/components.tsx b/reactfire/components.tsx
index 78d2032..7adc459 100644
--- a/reactfire/components.tsx
+++ b/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);
}
});
diff --git a/sample-simple/src/Auth.js b/sample-simple/src/Auth.js
index ad8a8a4..217c9a0 100644
--- a/sample-simple/src/Auth.js
+++ b/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';
diff --git a/sample-simple/src/Firestore.js b/sample-simple/src/Firestore.js
index e756258..176fcd7 100644
--- a/sample-simple/src/Firestore.js
+++ b/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,
diff --git a/sample-simple/src/RealtimeDatabase.js b/sample-simple/src/RealtimeDatabase.js
index 6cf66de..9ea80b0 100644
--- a/sample-simple/src/RealtimeDatabase.js
+++ b/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 (
-
+
Sample Object Listener
-
-
-
+
Sample List Listener
-
-
-
+
-
+
);
};
diff --git a/sample-simple/src/Storage.js b/sample-simple/src/Storage.js
index 92e0d24..20d40a0 100644
--- a/sample-simple/src/Storage.js
+++ b/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 => {
<>
{uploadTask ? (
-
+
-
+
) : (
''
)}
@@ -82,13 +92,17 @@ const AuthCheck = props => {
const SuspenseWrapper = props => {
return (
-
+
-
+
);
};