-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DST-494]: add loading states pattern (#4152)
* DST-494: add loading states pattern * DST-494: extend XLoader mode in fullsize and inline * DST-494: add full section demo * Create large-cows-explain.md * DST-494: resolve comments * DST-494: resolve comments * DST-494: fix inline loading button example * Update loading-states.mdx Updated content to remove references to a one-second-delay, as we decided not to do this. * DST-494: replace related content with teaser list * docs: fix the badge backgroundcolor (#4203) * DST-494: replace related content with teaser list * Update loading-states.mdx Added missing links, code formatting + made a few small wording changes to clarify points. --------- Co-authored-by: tirado-rx <[email protected]> Co-authored-by: sarahgm <[email protected]>
- Loading branch information
3 people
authored
Oct 8, 2024
1 parent
aed025c
commit f18c8aa
Showing
10 changed files
with
509 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| "@marigold/docs": patch | ||
| "@marigold/components": patch | ||
| --- | ||
|
|
||
| [DST-494]: add loading states pattern | ||
|
|
||
| [DST-494]: added prop `mode`to the `<XLoader />` to support inline and full-section loading |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
docs/content/patterns/loading-states/full-section.demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { FormEvent, useState } from 'react'; | ||
| import { | ||
| Button, | ||
| FieldGroup, | ||
| Form, | ||
| Headline, | ||
| Stack, | ||
| TextField, | ||
| XLoader, | ||
| } from '@marigold/components'; | ||
|
|
||
| export default () => { | ||
| const [isLoading, setIsLoading] = useState<boolean>(false); | ||
| const [searchTerm, setSearchTerm] = useState<string>(''); | ||
|
|
||
| const api = (inputValue: string): Promise<string> => { | ||
| return new Promise(resolve => { | ||
| setTimeout(() => { | ||
| resolve(inputValue); | ||
| }, 3000); | ||
| }); | ||
| }; | ||
|
|
||
| const handleOnSubmit = async (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| const formData = new FormData(e.target as HTMLFormElement); | ||
| const data: { [bookInput: string]: FormDataEntryValue } = | ||
| Object.fromEntries(formData); | ||
|
|
||
| setIsLoading(true); | ||
| const res = await api(data['bookInput'].toString()); | ||
| setSearchTerm(res); | ||
| setIsLoading(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Form onSubmit={handleOnSubmit}> | ||
| <FieldGroup labelWidth="100px"> | ||
| <Headline level={2}>Book search</Headline> | ||
| <TextField | ||
| label="Book name:" | ||
| description="Please enter a book name" | ||
| placeholder="Book name" | ||
| name="bookInput" | ||
| /> | ||
| <Stack space={2}> | ||
| <Stack alignX="right"> | ||
| <Button | ||
| variant="primary" | ||
| size="small" | ||
| type="submit" | ||
| className="w-20" | ||
| > | ||
| Submit | ||
| </Button> | ||
| </Stack> | ||
| {searchTerm && `You searched for ${searchTerm}.`} | ||
| </Stack> | ||
| </FieldGroup> | ||
| </Form> | ||
| {isLoading && <XLoader mode="fullsize" size={80} />} | ||
| </div> | ||
| ); | ||
| }; |
74 changes: 74 additions & 0 deletions
74
docs/content/patterns/loading-states/inline-indicator.demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { FormEvent, useState } from 'react'; | ||
| import { | ||
| Button, | ||
| FieldGroup, | ||
| Form, | ||
| Headline, | ||
| Stack, | ||
| TextField, | ||
| XLoader, | ||
| } from '@marigold/components'; | ||
|
|
||
| export default () => { | ||
| const [isLoading, setIsLoading] = useState<boolean>(false); | ||
| const [searchTerm, setSearchTerm] = useState<string>(''); | ||
|
|
||
| const api = (inputValue: string): Promise<string> => { | ||
| return new Promise(resolve => { | ||
| setTimeout(() => { | ||
| resolve(inputValue); | ||
| }, 3000); | ||
| }); | ||
| }; | ||
|
|
||
| const handleOnSubmit = async (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| const formData = new FormData(e.target as HTMLFormElement); | ||
| const data: { [bookInput: string]: FormDataEntryValue } = | ||
| Object.fromEntries(formData); | ||
|
|
||
| setIsLoading(true); | ||
| const res = await api(data['bookInput'].toString()); | ||
| setSearchTerm(res); | ||
| setIsLoading(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <Form onSubmit={handleOnSubmit}> | ||
| <FieldGroup labelWidth="100px"> | ||
| <Headline level={2}>Book search</Headline> | ||
| <TextField | ||
| label="Book name:" | ||
| description="Please enter a book name" | ||
| placeholder="Book name" | ||
| name="bookInput" | ||
| /> | ||
| <Stack space={2}> | ||
| <Stack alignX="right"> | ||
| {isLoading ? ( | ||
| <Button | ||
| variant="primary" | ||
| size="small" | ||
| type="submit" | ||
| className="h-8 w-20 !cursor-progress" | ||
| disabled | ||
| > | ||
| <XLoader size={16} className="fill-gray-700" /> | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| variant="primary" | ||
| size="small" | ||
| type="submit" | ||
| className="w-20" | ||
| > | ||
| Submit | ||
| </Button> | ||
| )} | ||
| </Stack> | ||
| {searchTerm && `You searched for <b>${searchTerm}</b>.`} | ||
| </Stack> | ||
| </FieldGroup> | ||
| </Form> | ||
| ); | ||
| }; |
Oops, something went wrong.