From e10d311ed5bc3faf963bcea657602c4de71b48ac Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Mon, 27 Nov 2023 10:03:39 -0800
Subject: [PATCH] Add spinner to playground

---
 packages/playground/src/react/standalone.tsx       | 14 ++++++++++++--
 .../loading-spinner.module.css                     |  8 ++++++++
 .../playground-component/loading-spinner.tsx       | 14 ++++++++++++++
 .../components/playground-component/playground.tsx |  2 ++
 packages/website/src/pages/playground.tsx          |  7 ++++++-
 5 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 packages/website/src/components/playground-component/loading-spinner.module.css
 create mode 100644 packages/website/src/components/playground-component/loading-spinner.tsx

diff --git a/packages/playground/src/react/standalone.tsx b/packages/playground/src/react/standalone.tsx
index ca50361ad4..256902aea5 100644
--- a/packages/playground/src/react/standalone.tsx
+++ b/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 = {
diff --git a/packages/website/src/components/playground-component/loading-spinner.module.css b/packages/website/src/components/playground-component/loading-spinner.module.css
new file mode 100644
index 0000000000..1545220b82
--- /dev/null
+++ b/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%;
+}
diff --git a/packages/website/src/components/playground-component/loading-spinner.tsx b/packages/website/src/components/playground-component/loading-spinner.tsx
new file mode 100644
index 0000000000..551f4b74bc
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/website/src/components/playground-component/playground.tsx b/packages/website/src/components/playground-component/playground.tsx
index 3da87b7a86..3555680ce4 100644
--- a/packages/website/src/components/playground-component/playground.tsx
+++ b/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..." />}
     />
   );
 };
diff --git a/packages/website/src/pages/playground.tsx b/packages/website/src/pages/playground.tsx
index 2e50acbc5f..d213a0bee2 100644
--- a/packages/website/src/pages/playground.tsx
+++ b/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..." />
+  );
 };