From c971e716b7a1d98e7c659e1536992443a725bc44 Mon Sep 17 00:00:00 2001
From: imanjra <ibrahim@voxel51.com>
Date: Mon, 8 May 2023 19:03:51 -0400
Subject: [PATCH] wrap operator placements with suspense

---
 .../operators/src/OperatorPlacements.tsx      |  5 ++++-
 app/packages/state/src/hooks/index.ts         |  1 +
 app/packages/state/src/hooks/withSuspense.tsx | 22 +++++++++++++++++++
 app/packages/state/tsconfig.json              |  3 ++-
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 app/packages/state/src/hooks/withSuspense.tsx

diff --git a/app/packages/operators/src/OperatorPlacements.tsx b/app/packages/operators/src/OperatorPlacements.tsx
index aea6f8da43..99198bd30d 100644
--- a/app/packages/operators/src/OperatorPlacements.tsx
+++ b/app/packages/operators/src/OperatorPlacements.tsx
@@ -5,8 +5,9 @@ import { Link } from "@fiftyone/components";
 import styled from "styled-components";
 import { types } from ".";
 import { Operator } from "./operators";
+import { withSuspense } from "@fiftyone/state";
 
-export default function OperatorPlacements(props: OperatorPlacementsProps) {
+function OperatorPlacements(props: OperatorPlacementsProps) {
   const { place } = props;
   const { placements } = useOperatorPlacements(place);
 
@@ -19,6 +20,8 @@ export default function OperatorPlacements(props: OperatorPlacementsProps) {
   ));
 }
 
+export default withSuspense(OperatorPlacements, () => null);
+
 const componentByView = {
   Button: ButtonPlacement,
 };
diff --git a/app/packages/state/src/hooks/index.ts b/app/packages/state/src/hooks/index.ts
index c2386e32e6..53878f6e40 100644
--- a/app/packages/state/src/hooks/index.ts
+++ b/app/packages/state/src/hooks/index.ts
@@ -50,3 +50,4 @@ export { default as useToPatches } from "./useToPatches";
 export { default as useUpdateSamples } from "./useUpdateSamples";
 export { default as useSchemaSettings } from "./useSchemaSettings";
 export { settingsModal } from "./useSchemaSettings";
+export { default as withSuspense } from "./withSuspense";
diff --git a/app/packages/state/src/hooks/withSuspense.tsx b/app/packages/state/src/hooks/withSuspense.tsx
new file mode 100644
index 0000000000..5461433bec
--- /dev/null
+++ b/app/packages/state/src/hooks/withSuspense.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Suspense } from "react";
+
+export default function withSuspense<ComponentProps>(
+  Component: React.ComponentType<ComponentProps>,
+  LoaderComponent: React.ComponentType<ComponentProps>
+) {
+  const ComponentWithSuspense = (props: ComponentProps) => {
+    const Loading = LoaderComponent || DefaultLoader;
+    return (
+      <Suspense fallback={<Loading {...props} />}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
+
+  return ComponentWithSuspense;
+}
+
+function DefaultLoader() {
+  return null;
+}
diff --git a/app/packages/state/tsconfig.json b/app/packages/state/tsconfig.json
index 1ede5a2c51..9f9bf85ceb 100644
--- a/app/packages/state/tsconfig.json
+++ b/app/packages/state/tsconfig.json
@@ -13,7 +13,8 @@
         "noImplicitReturns": true,
         "noImplicitAny": false,
         "plugins": [{ "name": "typescript-plugin-css-modules" }],
-        "composite": true
+        "composite": true,
+        "jsx": "react"
     },
     "include": ["./__mocks__", "./src", "tests/recoil/options.test.ts"],
     "exclude": ["node_modules"]