Add spinner to playground when loading

common/changes/@typespec/playground/playground-spinner_2023-11-27-18-05.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "Allow standalone playground to show a loading fallback",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/playground"
+}

packages/playground/src/react/standalone.tsx

@@ -7,7 +7,15 @@ import {
   useToastController,
   webLightTheme,
 } from "@fluentui/react-components";
-import { FunctionComponent, useCallback, useEffect, useId, useMemo, useState } from "react";
+import {
+  FunctionComponent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHost } from "../browser-host.js";
 import { LibraryImportOptions } from "../core.js";
@@ -19,6 +27,8 @@ import { Playground, PlaygroundProps, PlaygroundSaveData } from "./playground.js
 export interface ReactPlaygroundConfig extends Partial<PlaygroundProps> {
   readonly libraries: readonly string[];
   readonly importConfig?: LibraryImportOptions;
+  /** Content to show while the playground data is loading(Libraries) */
+  readonly fallback?: ReactNode;
 }
 
 interface StandalonePlaygroundContext {
@@ -80,7 +90,7 @@ export const StandalonePlayground: FunctionComponent<ReactPlaygroundConfig> = (c
     [context]
   );
   if (context === undefined || fixedOptions === undefined) {
-    return <></>;
+    return config.fallback;
   }
 
   const options: PlaygroundProps = {

packages/website/src/components/playground-component/loading-spinner.module.css

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}

packages/website/src/components/playground-component/loading-spinner.tsx

@@ -0,0 +1,14 @@
+import { Spinner } from "@fluentui/react-components";
+import style from "./loading-spinner.module.css";
+
+export interface LoadingSpinnerProps {
+  message?: string;
+}
+export const LoadingSpinner = ({ message }: LoadingSpinnerProps) => {
+  return (
+    <div className={style["container"]}>
+      <Spinner />
+      <div>{message}</div>
+    </div>
+  );
+};

packages/website/src/components/playground-component/playground.tsx

@@ -13,6 +13,7 @@ import {
 import { SwaggerUIViewer } from "@typespec/playground/react/viewers";
 import { FunctionComponent, useMemo } from "react";
 import { VersionData } from "./import-map";
+import { LoadingSpinner } from "./loading-spinner";
 
 import "@typespec/playground/style.css";
 
@@ -52,6 +53,7 @@ export const WebsitePlayground = ({ versionData }: WebsitePlaygroundProps) => {
       importConfig={{ useShim: true }}
       editorOptions={editorOptions}
       footer={<PlaygroundFooter versionData={versionData} />}
+      fallback={<LoadingSpinner message="Loading libraries..." />}
     />
   );
 };

packages/website/src/pages/playground.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import "@typespec/playground/style.css";
 import { FluentLayout } from "../components/fluent-layout/fluent-layout";
 import { VersionData, loadImportMap } from "../components/playground-component/import-map";
+import { LoadingSpinner } from "../components/playground-component/loading-spinner";
 
 export default function PlaygroundPage() {
   return (
@@ -34,5 +35,9 @@ const AsyncPlayground = () => {
       });
   }, []);
 
-  return mod && <mod.WebsitePlayground versionData={mod.versionData} />;
+  return mod ? (
+    <mod.WebsitePlayground versionData={mod.versionData} />
+  ) : (
+    <LoadingSpinner message="Loading playground..." />
+  );
 };