feat(compat): migrate BCD table to lit

client/src/document/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR, { mutate } from "swr";
 
@@ -9,7 +9,6 @@ import { useDocumentURL, useDecorateCodeExamples, useRunSample } from "./hooks";
 import { Doc } from "../../../libs/types/document";
 // Ingredients
 import { Prose } from "./ingredients/prose";
-import { LazyBrowserCompatibilityTable } from "./lazy-bcd-table";
 import { SpecificationSection } from "./ingredients/spec-section";
 
 // Misc
@@ -43,9 +42,13 @@ import { BaselineIndicator } from "./baseline-indicator";
 import { PlayQueue } from "../playground/queue";
 import { useGleanClick } from "../telemetry/glean-context";
 import { CLIENT_SIDE_NAVIGATION } from "../telemetry/constants";
+import { Spinner } from "../ui/atoms/spinner";
 // import { useUIStatus } from "../ui-context";
 
 // Lazy sub-components
+const LazyBrowserCompatibilityTable = React.lazy(
+  () => import("../lit/compat/lazy-bcd-table")
+);
 const Toolbar = React.lazy(() => import("./toolbar"));
 const MathMLPolyfillMaybe = React.lazy(() => import("./mathml-polyfill"));
 
@@ -261,15 +264,23 @@ export function Document(props /* TODO: define a TS interface for this */) {
 }
 
 export function RenderDocumentBody({ doc }) {
+  const locale = useLocale();
+
   return doc.body.map((section, i) => {
     if (section.type === "prose") {
       return <Prose key={section.value.id} section={section.value} />;
     } else if (section.type === "browser_compatibility") {
+      const { id, title, isH3, query } = section.value;
       return (
-        <LazyBrowserCompatibilityTable
-          key={`browser_compatibility${i}`}
-          {...section.value}
-        />
+        <Suspense fallback={<Spinner />} key={`browser_compatibility${i}`}>
+          <LazyBrowserCompatibilityTable
+            _id={id}
+            _title={title}
+            ish3={isH3}
+            query={query}
+            locale={locale}
+          />
+        </Suspense>
       );
     } else if (section.type === "specifications") {
       return (

client/src/document/ingredients/browser-compatibility-table/index.tsx

@@ -46,7 +46,7 @@ export const HIDDEN_BROWSERS = ["ie"];
  * shown. In all other categories, if compat data has info about Deno / Node.js
  * those are also shown. Deno is always shown if Node.js is shown.
  */
-function gatherPlatformsAndBrowsers(
+export function gatherPlatformsAndBrowsers(
   category: string,
   data: BCD.Identifier,
   browserInfo: BCD.Browsers