docs: Add Loading and TextArea to playgrounds

docs/core/api/useDLE.md

@@ -50,7 +50,7 @@ import { ProfileResource } from './ProfileResource';
 function ProfileList(): JSX.Element {
   const { data, loading, error } = useDLE(ProfileResource.getList);
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <>loading...</>;
+  if (loading || !data) return <Loading/>;
   return (
     <div>
       {data.map(profile => (
@@ -165,7 +165,7 @@ function ProfileDetail(): JSX.Element {
     error,
   } = useDLE(ProfileResource.get, { id: 1 });
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !profile) return <>loading...</>;
+  if (loading || !profile) return <Loading/>;
   return (
     <div className="listItem">
       <Avatar src={profile.avatar} />
@@ -230,7 +230,7 @@ import { PostResource, UserResource } from './Resources';
 export default function PostWithAuthor({ id }: { id: string }) {
   const postDLE = useDLE(PostResource.get, { id });
   if (postDLE.error) return <div>Error {`${postDLE.error.status}`}</div>;
-  if (postDLE.loading || !postDLE.data) return <>loading...</>;
+  if (postDLE.loading || !postDLE.data) return <Loading/>;
   const authorDLE = useDLE(
     UserResource.get,
     postDLE.data.userId
@@ -240,7 +240,7 @@ export default function PostWithAuthor({ id }: { id: string }) {
       : null,
   );
   if (authorDLE.error) return <div>Error {`${authorDLE.error.status}`}</div>;
-  if (authorDLE.loading || !authorDLE.data) return <>loading...</>;
+  if (authorDLE.loading || !authorDLE.data) return <Loading/>;
 
   return <div>{authorDLE.data.username}</div>
 }
@@ -281,7 +281,7 @@ import { getPosts } from './api/Post';
 export default function ArticleList({ page }: { page: string }) {
   const { data, loading, error } = useDLE(getPosts, { page });
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <>loading...</>;
+  if (loading || !data) return <Loading/>;
   const { results: posts, nextPage, lastPage } = data;
   return (
     <div>

docs/core/getting-started/data-dependency.md

@@ -252,7 +252,7 @@ import { ProfileResource } from './ProfileResource';
 function ProfileList(): JSX.Element {
   const { data, loading, error } = useDLE(ProfileResource.getList);
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <>loading...</>;
+  if (loading || !data) return <Loading/>;
   return (
     <div>
       {data.map(profile => (

docs/core/shared/_useLoading.mdx

@@ -1,5 +1,8 @@
 import HooksPlayground from '@site/src/components/HooksPlayground';
-import { postFixtures,getInitialInterceptorData } from '@site/src/fixtures/posts';
+import {
+  postFixtures,
+  getInitialInterceptorData,
+} from '@site/src/fixtures/posts';
 
 <HooksPlayground fixtures={postFixtures} getInitialInterceptorData={getInitialInterceptorData} row>
 
@@ -54,18 +57,18 @@ export default function PostForm({ onSubmit, loading, error }) {
   };
   return (
     <form onSubmit={handleSubmit}>
-      <TextInput label="Title" name="title" defaultValue="My New Post"
-          required />
-      <label>
-        Body:
-        <br />
-        <textarea name="body" rows={12} required>
-          After clicking 'save', the button will be disabled until
-          the POST is completed. Upon completion the newly created
-          post is displayed immediately as Reactive Data Client is
-          able to use the fetch response to populate the store.
-        </textarea>
-      </label>
+      <TextInput
+        label="Title"
+        name="title"
+        defaultValue="My New Post"
+        required
+      />
+      <TextArea name="body" rows={12} label="Body" required>
+        After clicking 'save', the button will be disabled until the POST
+        is completed. Upon completion the newly created post is displayed
+        immediately as Reactive Data Client is able to use the fetch
+        response to populate the store.
+      </TextArea>
       {error ? (
         <div className="alert alert--danger">{error.message}</div>
       ) : null}
@@ -93,8 +96,9 @@ export default function PostCreate({ navigateToPost }) {
     },
     [ctrl],
   );
-  return <PostForm onSubmit={handleSubmit} loading={loading}
-    error={error} />;
+  return (
+    <PostForm onSubmit={handleSubmit} loading={loading} error={error} />
+  );
 }
 ```
 
@@ -119,4 +123,4 @@ function Navigation() {
 render(<Navigation />);
 ```
 
-</HooksPlayground>
+</HooksPlayground>

docs/rest/api/Collection.md

@@ -121,7 +121,7 @@ export default function NewTodo({ userId }: { userId?: string }) {
   };
 
   return (
-    <div>
+    <div className="listItem nogap">
       <TextInput size="small" onKeyDown={handlePress} />
       <label>
         <input

website/src/components/Playground/DesignSystem/Loading.module.css

@@ -0,0 +1,11 @@
+.loading {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.loading img {
+  width:50px;
+  height:50px;
+}

website/src/components/Playground/DesignSystem/Loading.tsx

@@ -0,0 +1,12 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import styles from './Loading.module.css';
+
+export function Loading() {
+  const loadingUrl = useBaseUrl('img/loading-logo.svg');
+  return (
+    <div className={styles.loading}>
+      <img src={loadingUrl} />
+    </div>
+  );
+}

website/src/components/Playground/DesignSystem/TextArea.tsx

@@ -0,0 +1,18 @@
+import classnames from 'clsx';
+import React, { type InputHTMLAttributes } from 'react';
+
+export function TextArea({
+  label,
+  ...props
+}: InputHTMLAttributes<HTMLTextAreaElement> & {
+  label?: React.ReactNode;
+}) {
+  return (
+    <div className="rt-TextAreaRoot">
+      <textarea className="rt-TextAreaInput" {...props} />
+      <label className="rt-TextFieldLabel" htmlFor={props.name}>
+        {label}
+      </label>
+    </div>
+  );
+}

website/src/components/Playground/DesignSystem/design-system.css

@@ -15,8 +15,10 @@ html[data-theme='dark'] .playground-preview {
   border: 1px solid var(--ifm-color-emphasis-400);
   border-radius: 4px;
   position: relative;
+  margin-bottom:1ex;
 }
 html[data-theme='dark'] .rt-TextFieldRoot,
+html[data-theme='dark'] .rt-TextAreaRoot,
 html[data-theme='dark'] .small.rt-TextFieldRoot:hover,
 html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
   background-color: var(--ifm-color-emphasis-100);
@@ -75,8 +77,7 @@ html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
 }
 
 /* Focus state for the text field */
-.rt-TextFieldInput:focus + .rt-TextFieldLabel,
-.rt-TextFieldInput:not(:placeholder-shown) + .rt-TextFieldLabel {
+.rt-TextFieldInput:focus + .rt-TextFieldLabel {
   color: var(--ifm-color-formfield-active);
 }
 
@@ -124,4 +125,44 @@ html[data-theme='dark'] .small.rt-TextFieldRoot {
 
 .listItem .rt-TextFieldRoot {
   width: calc(100% - 21px);
-}
+}
+
+
+
+
+/* Root container for the textarea */
+.rt-TextAreaRoot {
+  position: relative;
+  width: 100%;
+  background-color: var(--ifm-color-emphasis-0);
+  border: 1px solid var(--ifm-color-emphasis-400);
+  border-radius: 4px;
+  padding-bottom:-5px;
+  /* overflow: hidden; */
+  margin: 1.5ex 0 .5ex;
+}
+
+/* The textarea element inside the component */
+.rt-TextAreaInput {
+  padding: 0.5em;
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  color: var(--ifm-color-content);
+  background: transparent;
+  resize: vertical; /* Allow vertical resizing */
+  min-height: 4em; /* Set a minimum height */
+  box-sizing: border-box;
+  margin-bottom: -8px;
+}
+
+
+/* Focus state for the textarea */
+.rt-TextAreaInput:focus + .rt-TextFieldLabel {
+  color: var(--ifm-color-formfield-active);
+}
+
+.rt-TextAreaRoot:focus-within {
+  border-color: var(--ifm-color-formfield-active);
+}

website/src/components/Playground/DesignSystem/index.ts

@@ -4,4 +4,6 @@ export { Avatar } from './Avatar';
 export { Formatted } from './Formatted';
 import './design-system.css';
 export { TextInput } from './TextInput';
+export { TextArea } from './TextArea';
 export { SearchIcon } from './SearchIcon';
+export { Loading } from './Loading';

website/src/components/Playground/PreviewBlock.tsx

@@ -1,19 +1,19 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 import { LiveError, LivePreview } from 'react-live';
 
 import Boundary from './Boundary';
+import { Loading } from './DesignSystem/Loading';
 import styles from './styles.module.css';
 
 export default function PreviewBlock() {
   return (
     <>
-      <Boundary fallback={<LivePreviewLoader />}>
+      <Boundary fallback={<Loading />}>
         <LivePreview />
       </Boundary>
+      {/* <Loading /> */}
       <LiveError className={styles.playgroundError} />
     </>
   );
 }
-function LivePreviewLoader() {
-  return <div>Loading...</div>;
-}

website/src/components/Playground/monaco-init.ts

@@ -267,7 +267,9 @@ if (
         declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
         declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
         declare function TextInput(props:Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
+        declare function TextArea(props:InputHTMLAttributes<HTMLTextAreaElement> & { label?: React.ReactNode;}):JSX.Element;
         declare function SearchIcon():JSX.Element;
+        declare function Loading():JSX.Element;
         declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
         declare interface NumberProps {
           /**