wrap operator placements with suspense

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,
 };

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";

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;
+}

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"]