updates the loader docs

docs/snippets/angular/loader-story.mdx.mdx

@@ -0,0 +1,28 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+import TodoItem from './TodoItem';
+
+import fetch from 'node-fetch';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => ({
+    props: {
+      todo: todo,
+    },
+  })}
+</Story>
+```

docs/snippets/angular/loader-story.ts.mdx

@@ -0,0 +1,37 @@
+```ts
+// TodoItem.stories.ts
+
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
+
+import fetch from 'node-fetch';
+
+import { CommonModule } from '@angular/common';
+
+import TodoItem from './TodoItem';
+
+export default {
+  component: TodoItem,
+  decorators: [
+    moduleMetadata({
+      declarations: [TodoItem],
+      imports: [CommonModule],
+    }),
+  ],
+  title: 'Examples/Loader',
+} as Meta;
+
+export const Primary = (args, { loaded: { todo } }) => {
+  return {
+    props: {
+      args,
+      todo,
+    },
+  };
+};
+
+Primary.loaders = [
+  async () => ({
+    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+  }),
+];
+```

docs/snippets/svelte/storybook-preview-global-loader.js.mdx → docs/snippets/common/storybook-preview-global-loader.js.mdx

@@ -5,7 +5,7 @@ import fetch from 'node-fetch';
 
 export const loaders = [
   async () => ({
-    currentUser: (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    currentUser: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
   }),
 ];
 ```

docs/snippets/react/loader-story.js.mdx

@@ -7,6 +7,11 @@ import fetch from 'node-fetch';
 
 import { TodoItem } from './TodoItem';
 
+export default {
+  component: TodoItem,
+  title: 'Examples/Loader',
+};
+
 export const Primary = (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />;
 Primary.loaders = [
   async () => ({

docs/snippets/react/loader-story.mdx.mdx

@@ -0,0 +1,26 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import fetch from 'node-fetch';
+
+import { TodoItem } from './TodoItem';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => (
+    <TodoItem {...args} todo={todo} />
+  )}
+</Story>
+```

docs/snippets/svelte/loader-story.js.mdx

@@ -5,14 +5,19 @@ import fetch from 'node-fetch';
 
 import TodoItem from './TodoItem.svelte';
 
+export default {
+  component: TodoItem,
+  title: 'Examples/Loader',
+};
+
 export const Primary = (args, { loaded: { todo } }) => ({
   Component: TodoItem,
-  props: {...args, ...todo},
+  props: { ...args, ...todo },
 });
 
-Primary.loaders = [
+Primaryloaders = [
   async () => ({
-    todo: (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
   }),
 ];
 ```

docs/snippets/svelte/loader-story.mdx.mdx

@@ -0,0 +1,30 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import TodoItem from './TodoItem.svelte';
+
+import fetch from 'node-fetch';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => ({
+    Component: SampleLoaderComponent,
+    props: {
+      ...args,
+      todo,
+    },
+  })}
+</Story>
+```

docs/snippets/vue/loader-story.3.js.mdx

@@ -0,0 +1,28 @@
+```js
+// TodoItem.stories.js
+
+import TodoItem from './TodoItem.vue';
+
+import fetch from 'node-fetch';
+
+export default {
+  component: TodoItem,
+  title: 'Examples/Loader',
+};
+
+export const Primary = (args, { loaded: { todo } }) => {
+  return {
+    components: { TodoItem },
+    setup() {
+      return { args, todo: todo };
+    },
+    template: `<TodoItem :todo="todo"/>`,
+  };
+};
+
+SampleStory.loaders = [
+  async () => ({
+    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+  }),
+];
+```

docs/snippets/vue/loader-story.mdx.mdx

@@ -0,0 +1,30 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import TodoItem from './TodoItem.vue';
+
+import fetch from 'node-fetch';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => ({
+    components: { TodoItem },
+    setup() {
+      return { args, todo: todo };
+    },
+    template: `<TodoItem :todo="todo"/>`,
+  })}
+</Story>
+```

docs/writing-stories/loaders.md

@@ -2,30 +2,36 @@
 title: 'Loaders (experimental)'
 ---
 
-Loaders (experimental) are asynchronous functions that load data for a story and its [decorators](./decorators.md). A story's loaders run before the story renders, and the loaded data is passed into the story via its render context.
+Loaders (experimental) are asynchronous functions that load data for a story and its [decorators](./decorators.md). A story's loaders run before the story renders, and the loaded data injected into the story via its render context.
 
-Loaders can be used to load any asset, typically as a performance optimization. They were designed for to lazy load components and other large story imports. They can also be used to load remote API data to be used in a story. However, [Args](./args.md) is the recommended way to manage story data, and we're building up an ecosystem of tools and techniques around Args which might not be compatible with loaded data.
+Loaders can be used to load any asset, lazy load components, or fetch data from a remote API. This feature was designed as a performance optimization to handle large story imports. However, [Args](./args.md) is the recommended way to manage story data. We're building up an ecosystem of tools and techniques around Args that might not be compatible with loaded data.
 
-Loaders are an advanced feature ("escape hatch") and we only recommend using them if you have a specific need that can't be fulfilled by other means. They are experimental in Storybook 6.1 and the APIs are subject to change outside of the normal semver cycle.
+They are an advanced feature (i.e., escape hatch), and we only recommend using them if you have a specific need that other means can't fulfill. They are experimental in Storybook 6.1, and the APIs are subject to change outside of the normal semver cycle.
 
 ## Fetching API data
 
-Stories are isolated component examples that render internal data that's defined as part of the story or alongside the story as [args](./args.md).
+Stories are isolated component examples that render internal data defined as part of the story or alongside the story as [args](./args.md).
 
-Loaders are useful when you need to load story data externally, e.g. from a remote API. Consider the following example that fetches a todo item for display in a todo list:
+Loaders are helpful when you need to load story data externally (e.g., from a remote API). Consider the following example that fetches a todo item to display in a todo list:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'react/loader-story.js.mdx',
+    'react/loader-story.mdx.mdx',
+    'vue/loader-story.3.js.mdx',
+    'vue/loader-story.mdx.mdx',
+    'angular/loader-story.ts.mdx',
+    'angular/loader-story.mdx.mdx',
     'svelte/loader-story.js.mdx',
+    'svelte/loader-story.mdx.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-The loaded data is combined into a `loaded` field on the story context, which is the second argument to a story function. In this example we spread the story's args in first, so they take priority over the static data provided by the loader.
+The response obtained from the remote API call is combined into a `loaded` field on the story context, which is the second argument to a story function. For example, in React, the story's args were spread first to prioritize them over the static data provided by the loader. Other frameworks will not need such requisite.
 
 ## Global loaders
 
@@ -35,20 +41,19 @@ We can also set a loader for **all stories** via the `loaders` export of your [`
 
 <CodeSnippets
   paths={[
-    'react/storybook-preview-global-loader.js.mdx',
-    'svelte/storybook-preview-global-loader.js.mdx',
+    'common/storybook-preview-global-loader.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-In this example, we load a "current user" that is available as `loaded.currentUser` for all stories.
+In this example, we load a "current user" available as `loaded.currentUser` for all stories.
 
 ## Loader inheritance
 
-Like parameters, loaders can be defined globally, at the component level and for a single story (as we’ve seen).
+Like [parameters](./parameters.md), loaders can be defined globally, at the component level, and for a single story (as we’ve seen).
 
-All loaders, defined at all levels that apply to a story, run before the story is rendered.
+All loaders, defined at all levels that apply to a story, run before the story renders in Storybook's canvas.
 
 - All loaders run in parallel
 - All results are the `loaded` field in the story context
@@ -63,3 +68,5 @@ Loaders have the following known limitations:
 
 - They are not yet compatible with the storyshots addon ([#12703](https://github.com/storybookjs/storybook/issues/12703)).
 - They are not yet compatible with inline-rendered stories in Storybook Docs ([#12726](https://github.com/storybookjs/storybook/issues/12726)).
+
+If you're interested in contributing to this feature, read our [contribution guide](../contribute/how-to-contribute.md) and submit a pull request with your work.