From 820d442f72dc4115faa7719d45d2749d27b19de5 Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Wed, 1 May 2024 16:52:34 -0400
Subject: [PATCH 01/10] init loadingwrapper

---
 .../LoadingWrapper.stories.svelte             | 47 +++++++++++++++++
 src/lib/LoadingWrapper/LoadingWrapper.svelte  | 50 +++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
 create mode 100644 src/lib/LoadingWrapper/LoadingWrapper.svelte

diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
new file mode 100644
index 00000000..c96d9633
--- /dev/null
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -0,0 +1,47 @@
+<script context="module">
+  import { onMount } from "svelte";
+  import LoadingWrapper from "./LoadingWrapper.svelte";
+
+  export const meta = {
+    title: "Components/LoadingWrapper",
+    description: "Wrapper to display a loading spinner graphic while content is loading",
+    component: LoadingWrapper,
+    tags: ["autodocs"],
+    parameters: {
+      docs: {
+        description: {
+          component: "Wrapper to display a loading spinner graphic while content is loading."
+        }
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+
+  // function to create a fake await for 2sec
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  $: loading = false;
+  onMount(() => {
+    loading = true;
+    sleep(2500).then(() => {
+      loading = false;
+    });
+  });
+</script>
+
+<Template>
+  <LoadingWrapper childLoading={loading}>
+    <span
+      >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
+      Lorem est labore amet irure nostrud. Exercitation Lorem do consectetur enim esse quis mollit
+      cupidatat aliqua magna. Ipsum irure anim commodo Lorem.
+    </span>
+  </LoadingWrapper>
+</Template>
+
+<Story name="Primary" />
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.svelte b/src/lib/LoadingWrapper/LoadingWrapper.svelte
new file mode 100644
index 00000000..6b67a7b9
--- /dev/null
+++ b/src/lib/LoadingWrapper/LoadingWrapper.svelte
@@ -0,0 +1,50 @@
+<script>
+  import urbanColors from "../utils/urbanColors.js";
+  import LogoUrbanAnimated from "../LogoUrbanAnimated/LogoUrbanAnimated.svelte";
+
+  /**
+   * Boolean indicating whether the child component is loading or not
+   * @type {boolean}
+   */
+  export let childLoading;
+
+  /**
+   * The background color of the loading container (can be null for transparent background)
+   * @type {string | null} ["white"]
+   */
+  export let backgroundColor = urbanColors.white;
+</script>
+
+<div class="container">
+  {#if childLoading}
+    <div class="loading" id="loading" style:background-color={backgroundColor}>
+      <slot name="graphic">
+        <LogoUrbanAnimated width={50} duration="1500ms" />
+      </slot>
+    </div>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .container {
+    position: relative;
+    width: 100%;
+  }
+
+  .loading {
+    /* absolute position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* take full size */
+    height: 100%;
+    width: 100%;
+
+    /* center */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+</style>

From 7987cd26b9750aac072c4bf4ea8f1c49d8a6475f Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Wed, 1 May 2024 16:59:03 -0400
Subject: [PATCH 02/10] init stories

---
 .../LoadingWrapper.stories.svelte             | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index c96d9633..5b1b029d 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -1,6 +1,8 @@
 <script context="module">
   import { onMount } from "svelte";
   import LoadingWrapper from "./LoadingWrapper.svelte";
+  import LogoUrbanWide from "../LogoUrbanWide/LogoUrbanWide.svelte";
+  import DatawrapperIframe from "../DatawrapperIframe/DatawrapperIframe.svelte";
 
   export const meta = {
     title: "Components/LoadingWrapper",
@@ -10,7 +12,8 @@
     parameters: {
       docs: {
         description: {
-          component: "Wrapper to display a loading spinner graphic while content is loading."
+          component:
+            'Wrapper to display a loading spinner graphic while content is loading. All children wrapped in component. Accepts an alternative graphic for the "graphic" named slot.'
         }
       }
     }
@@ -18,30 +21,51 @@
 </script>
 
 <script>
-  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story } from "@storybook/addon-svelte-csf";
 
   // function to create a fake await for 2sec
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
-  $: loading = false;
+  $: loading = true;
   onMount(() => {
-    loading = true;
     sleep(2500).then(() => {
       loading = false;
     });
   });
+
+  $: mapLoading = true;
 </script>
 
-<Template>
+<Story name="Default">
+  <LoadingWrapper childLoading={loading}>
+    <span
+      >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
+      Lorem est labore amet irure nostrud. Exercitation Lorem do consectetur enim esse quis mollit
+      cupidatat aliqua magna. Ipsum irure anim commodo Lorem.
+    </span>
+  </LoadingWrapper>
+</Story>
+
+<Story name="Custom graphic">
   <LoadingWrapper childLoading={loading}>
+    <LogoUrbanWide slot="graphic" />
     <span
       >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
       Lorem est labore amet irure nostrud. Exercitation Lorem do consectetur enim esse quis mollit
       cupidatat aliqua magna. Ipsum irure anim commodo Lorem.
     </span>
   </LoadingWrapper>
-</Template>
+</Story>
 
-<Story name="Primary" />
+<Story name="Datawrapper example">
+  <LoadingWrapper childLoading={mapLoading}>
+    <DatawrapperIframe
+      title="This is a title for the visualization"
+      ariaLabel="This is an accessible title for the visualization"
+      datawrapperId="RMnkX"
+      on:visrendered={() => (mapLoading = false)}
+    />
+  </LoadingWrapper>
+</Story>

From 88468045cf533bbd71da346c2f0bfc7dd39b5f02 Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Fri, 3 May 2024 13:50:55 -0400
Subject: [PATCH 03/10] update dw example

---
 src/lib/LoadingWrapper/LoadingWrapper.stories.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index 5b1b029d..3fb3b601 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -64,7 +64,7 @@
     <DatawrapperIframe
       title="This is a title for the visualization"
       ariaLabel="This is an accessible title for the visualization"
-      datawrapperId="RMnkX"
+      datawrapperId="qF5No"
       on:visrendered={() => (mapLoading = false)}
     />
   </LoadingWrapper>

From fe797c1f6209dad19ad9203a143da4ca08c22ca6 Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Fri, 3 May 2024 14:06:38 -0400
Subject: [PATCH 04/10] changelog and component export

---
 CHANGELOG.md     | 2 ++
 src/lib/index.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23a1bc2b..851fcfcc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Next
 
+- Add LoadingWrapper component to provide a loading graphic for components that need it
+
 ## v0.8.0
 
 - Simplify CSS in Toggle component
diff --git a/src/lib/index.js b/src/lib/index.js
index bafe22a8..ccfe1829 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -25,3 +25,4 @@ export { default as Scrolly } from "./Scrolly/Scrolly.svelte";
 export { default as Analytics, logClickToGA } from "./Analytics/Analytics.svelte";
 export { default as Headline } from "./Headline/Headline.svelte";
 export { default as PymChild } from "./Pym/PymChild.svelte";
+export { default as LoadingWrapper } from "./LoadingWrapper/LoadingWrapper.svelte";

From f0c00f7c89169ce4ef7d0a79d25c19b4dd1f1bb2 Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Tue, 7 May 2024 11:07:13 -0400
Subject: [PATCH 05/10] expose "set loading" functions

---
 .../LoadingWrapper/LoadingWrapper.stories.svelte   | 11 +++++------
 src/lib/LoadingWrapper/LoadingWrapper.svelte       | 14 +++++++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index 3fb3b601..acb37363 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -28,18 +28,17 @@
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
+  // set loading for paragraph examples, sleep for 2.5 sec on mount
   $: loading = true;
   onMount(() => {
     sleep(2500).then(() => {
       loading = false;
     });
   });
-
-  $: mapLoading = true;
 </script>
 
 <Story name="Default">
-  <LoadingWrapper childLoading={loading}>
+  <LoadingWrapper isChildLoading={loading}>
     <span
       >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
       Lorem est labore amet irure nostrud. Exercitation Lorem do consectetur enim esse quis mollit
@@ -49,7 +48,7 @@
 </Story>
 
 <Story name="Custom graphic">
-  <LoadingWrapper childLoading={loading}>
+  <LoadingWrapper isChildLoading={loading}>
     <LogoUrbanWide slot="graphic" />
     <span
       >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
@@ -60,12 +59,12 @@
 </Story>
 
 <Story name="Datawrapper example">
-  <LoadingWrapper childLoading={mapLoading}>
+  <LoadingWrapper let:childLoaded>
     <DatawrapperIframe
       title="This is a title for the visualization"
       ariaLabel="This is an accessible title for the visualization"
       datawrapperId="qF5No"
-      on:visrendered={() => (mapLoading = false)}
+      on:visrendered={childLoaded}
     />
   </LoadingWrapper>
 </Story>
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.svelte b/src/lib/LoadingWrapper/LoadingWrapper.svelte
index 6b67a7b9..360c300f 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.svelte
@@ -6,7 +6,15 @@
    * Boolean indicating whether the child component is loading or not
    * @type {boolean}
    */
-  export let childLoading;
+  export let isChildLoading;
+
+  let childLoaded = () => {
+    isChildLoading = false;
+  };
+
+  let childLoading = () => {
+    isChildLoading = true;
+  };
 
   /**
    * The background color of the loading container (can be null for transparent background)
@@ -16,14 +24,14 @@
 </script>
 
 <div class="container">
-  {#if childLoading}
+  {#if isChildLoading}
     <div class="loading" id="loading" style:background-color={backgroundColor}>
       <slot name="graphic">
         <LogoUrbanAnimated width={50} duration="1500ms" />
       </slot>
     </div>
   {/if}
-  <slot />
+  <slot {isChildLoading} {childLoading} {childLoaded} />
 </div>
 
 <style>

From e037aa9cfe2d1c5546b082382a110867a930421a Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Tue, 7 May 2024 12:05:27 -0400
Subject: [PATCH 06/10] update loading wrapper story + add on:startrender to
 DatawrapperIframe

---
 src/docs/DatawrapperSwitching.docs.mdx        |  4 ++++
 .../DatawrapperSwitching.stories.svelte       | 20 ++++++++++++++++++
 .../DatawrapperIframe.svelte                  |  8 ++++++-
 .../LoadingWrapper.stories.svelte             | 12 +++++------
 src/lib/LoadingWrapper/LoadingWrapper.svelte  | 21 ++++++++++---------
 5 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/docs/DatawrapperSwitching.docs.mdx b/src/docs/DatawrapperSwitching.docs.mdx
index d5ec1898..bc2c05ae 100644
--- a/src/docs/DatawrapperSwitching.docs.mdx
+++ b/src/docs/DatawrapperSwitching.docs.mdx
@@ -14,3 +14,7 @@ It's useful to switch between Datawrapper iframes. Below, we demonstrate two use
 ### Switching with buttons
 
 <Canvas of={stories.Buttons} sourceState="shown" />
+
+### Switching with buttons (and loading wrapper)
+
+<Canvas of={stories.Loading} sourceState="shown" />
diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index 4af358c5..e738d4fc 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -6,6 +6,8 @@
 </script>
 
 <script>
+  import LoadingWrapper from "$lib/LoadingWrapper/LoadingWrapper.svelte";
+
   import { Story } from "@storybook/addon-svelte-csf";
   import DatawrapperIframe from "$lib/DatawrapperIframe/DatawrapperIframe.svelte";
   import BasicDropdown from "$lib/BasicDropdown/BasicDropdown.svelte";
@@ -18,6 +20,8 @@
     { value: "91Q0t", label: "Chart #2" },
     { value: "eaD2D", label: "Chart #3" }
   ];
+
+  let selectedChartLoading = "Toh1S";
 </script>
 
 <Story
@@ -83,3 +87,19 @@
     <DatawrapperIframe datawrapperId={selectedChart} />
   {/key}
 </Story>
+
+<Story name="Loading" source={``}>
+  <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
+  <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
+  <Button on:click={() => (selectedChart = "JNfqf")}>Chart #3</Button>
+
+  {#key selectedChart}
+    <LoadingWrapper let:setChildLoaded let:setChildLoading>
+      <DatawrapperIframe
+        datawrapperId={selectedChartLoading}
+        on:startrender={setChildLoading}
+        on:visrendered={setChildLoaded}
+      />
+    </LoadingWrapper>
+  {/key}
+</Story>
diff --git a/src/lib/DatawrapperIframe/DatawrapperIframe.svelte b/src/lib/DatawrapperIframe/DatawrapperIframe.svelte
index d0559b9e..eaee3d9e 100644
--- a/src/lib/DatawrapperIframe/DatawrapperIframe.svelte
+++ b/src/lib/DatawrapperIframe/DatawrapperIframe.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onDestroy } from "svelte";
+  import { createEventDispatcher, onDestroy, beforeUpdate, afterUpdate } from "svelte";
   import datawrapper from "./events";
   import datawrapperEventList from "./datawrapper-event-list.json";
 
@@ -49,6 +49,12 @@
     });
   }
 
+  // dispatch an even when the iframe starts to load
+  // (does not user beforeUpdate because it is not triggered on first load)
+  afterUpdate(() => {
+    dispatch("startrender");
+  });
+
   // turn off interaction events on destroy
   // (prevents multiple events when loading multiple iframes)
   onDestroy(() => {
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index acb37363..4c6676dc 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -29,16 +29,16 @@
   }
 
   // set loading for paragraph examples, sleep for 2.5 sec on mount
-  $: loading = true;
+  $: isChildLoading = true;
   onMount(() => {
     sleep(2500).then(() => {
-      loading = false;
+      isChildLoading = false;
     });
   });
 </script>
 
 <Story name="Default">
-  <LoadingWrapper isChildLoading={loading}>
+  <LoadingWrapper {isChildLoading}>
     <span
       >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
       Lorem est labore amet irure nostrud. Exercitation Lorem do consectetur enim esse quis mollit
@@ -48,7 +48,7 @@
 </Story>
 
 <Story name="Custom graphic">
-  <LoadingWrapper isChildLoading={loading}>
+  <LoadingWrapper {isChildLoading}>
     <LogoUrbanWide slot="graphic" />
     <span
       >Amet est Lorem qui ullamco laboris velit. Incididunt est sunt exercitation qui ea. Officia
@@ -59,12 +59,12 @@
 </Story>
 
 <Story name="Datawrapper example">
-  <LoadingWrapper let:childLoaded>
+  <LoadingWrapper let:setChildLoaded>
     <DatawrapperIframe
       title="This is a title for the visualization"
       ariaLabel="This is an accessible title for the visualization"
       datawrapperId="qF5No"
-      on:visrendered={childLoaded}
+      on:visrendered={setChildLoaded}
     />
   </LoadingWrapper>
 </Story>
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.svelte b/src/lib/LoadingWrapper/LoadingWrapper.svelte
index 360c300f..43db7e7d 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.svelte
@@ -6,21 +6,22 @@
    * Boolean indicating whether the child component is loading or not
    * @type {boolean}
    */
-  export let isChildLoading;
-
-  let childLoaded = () => {
-    isChildLoading = false;
-  };
-
-  let childLoading = () => {
-    isChildLoading = true;
-  };
+  export let isChildLoading = true;
 
   /**
    * The background color of the loading container (can be null for transparent background)
    * @type {string | null} ["white"]
    */
   export let backgroundColor = urbanColors.white;
+
+  // define functions to expose that set isChildLoading
+  let setChildLoaded = () => {
+    isChildLoading = false;
+  };
+
+  let setChildLoading = () => {
+    isChildLoading = true;
+  };
 </script>
 
 <div class="container">
@@ -31,7 +32,7 @@
       </slot>
     </div>
   {/if}
-  <slot {isChildLoading} {childLoading} {childLoaded} />
+  <slot {setChildLoading} {setChildLoaded} />
 </div>
 
 <style>

From b101eb79022a239d78c95713c85ce1be150226b0 Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Tue, 7 May 2024 12:10:27 -0400
Subject: [PATCH 07/10] add source in switching mdx, more startrender info

---
 .../stories/DatawrapperSwitching.stories.svelte   | 15 ++++++++++++++-
 .../DatawrapperIframe.stories.svelte              |  2 +-
 .../LoadingWrapper/LoadingWrapper.stories.svelte  |  3 ++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index e738d4fc..552d349a 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -88,7 +88,20 @@
   {/key}
 </Story>
 
-<Story name="Loading" source={``}>
+<Story
+  name="Loading"
+  source={`
+  {#key selectedChart}
+    <LoadingWrapper let:setChildLoaded let:setChildLoading>
+      <DatawrapperIframe
+        datawrapperId={selectedChart}
+        on:startrender={setChildLoading}
+        on:visrendered={setChildLoaded}
+      />
+    </LoadingWrapper>
+  {/key}
+`}
+>
   <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
   <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
   <Button on:click={() => (selectedChart = "JNfqf")}>Chart #3</Button>
diff --git a/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte b/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
index bde74b48..0eaaa025 100644
--- a/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
+++ b/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
@@ -10,7 +10,7 @@
       docs: {
         description: {
           component:
-            "Datawrapper iframe with <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events' target='_blank'>event dispatching</a> enabled. All interaction events are accessible via <code>on:eventname</code> (<b>no periods</b>) on the `DatawrapperIframe` Svelte component itself.<br/><br/>The complete event list and associated descriptions can be found <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events' target='_blank'>here</a>.<br/><br/>In April 2024, the <code>vis.rendered</code> event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading."
+            "Datawrapper iframe with <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events' target='_blank'>event dispatching</a> enabled. All interaction events are accessible via <code>on:eventname</code> (<b>no periods</b>) on the `DatawrapperIframe` Svelte component itself.<br/><br/>The complete event list and associated descriptions can be found <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events' target='_blank'>here</a>.<br/><br/>In April 2024, the <code>vis.rendered</code> event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.<br><br>The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the <a href='/docs/components-loadingwrapper--docs' >LoadingWrapper</a> component."
         }
       }
     }
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index 4c6676dc..1ce98461 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -59,11 +59,12 @@
 </Story>
 
 <Story name="Datawrapper example">
-  <LoadingWrapper let:setChildLoaded>
+  <LoadingWrapper let:setChildLoading let:setChildLoaded>
     <DatawrapperIframe
       title="This is a title for the visualization"
       ariaLabel="This is an accessible title for the visualization"
       datawrapperId="qF5No"
+      on:startrender={setChildLoading}
       on:visrendered={setChildLoaded}
     />
   </LoadingWrapper>

From 6b11b6204cec2b772f8711f5851846e8e5e228fb Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Tue, 7 May 2024 12:23:26 -0400
Subject: [PATCH 08/10] update with public examples

---
 src/docs/stories/DatawrapperSwitching.stories.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index 552d349a..b338ce08 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -21,7 +21,7 @@
     { value: "eaD2D", label: "Chart #3" }
   ];
 
-  let selectedChartLoading = "Toh1S";
+  let selectedChartLoading = "WsGs1";
 </script>
 
 <Story
@@ -102,9 +102,9 @@
   {/key}
 `}
 >
-  <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
-  <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
-  <Button on:click={() => (selectedChart = "JNfqf")}>Chart #3</Button>
+  <Button on:click={() => (selectedChartLoading = "WsGs1")}>Chart #1</Button>
+  <Button on:click={() => (selectedChartLoading = "ug91F")}>Chart #2</Button>
+  <Button on:click={() => (selectedChartLoading = "9ZUog")}>Chart #3</Button>
 
   {#key selectedChart}
     <LoadingWrapper let:setChildLoaded let:setChildLoading>

From 4130ad6cd7dd8d764a343a6fd4f325dac2215a13 Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Tue, 7 May 2024 12:23:26 -0400
Subject: [PATCH 09/10] update with public examples

---
 src/docs/stories/DatawrapperSwitching.stories.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index b338ce08..22d6ccd6 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -102,9 +102,8 @@
   {/key}
 `}
 >
-  <Button on:click={() => (selectedChartLoading = "WsGs1")}>Chart #1</Button>
-  <Button on:click={() => (selectedChartLoading = "ug91F")}>Chart #2</Button>
-  <Button on:click={() => (selectedChartLoading = "9ZUog")}>Chart #3</Button>
+  <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
+  <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
 
   {#key selectedChart}
     <LoadingWrapper let:setChildLoaded let:setChildLoading>

From e91a5a854042e58ab875705e3ddb6a2e24b3851b Mon Sep 17 00:00:00 2001
From: Ben Kates <benekates@gmail.com>
Date: Tue, 7 May 2024 15:31:25 -0400
Subject: [PATCH 10/10] update documentation for LoadingWrapper and
 DatawrwapperIframe

---
 src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte | 2 +-
 src/lib/LoadingWrapper/LoadingWrapper.stories.svelte       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte b/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
index 0eaaa025..8b82c8ca 100644
--- a/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
+++ b/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
@@ -10,7 +10,7 @@
       docs: {
         description: {
           component:
-            "Datawrapper iframe with <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events' target='_blank'>event dispatching</a> enabled. All interaction events are accessible via <code>on:eventname</code> (<b>no periods</b>) on the `DatawrapperIframe` Svelte component itself.<br/><br/>The complete event list and associated descriptions can be found <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events' target='_blank'>here</a>.<br/><br/>In April 2024, the <code>vis.rendered</code> event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.<br><br>The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the <a href='/docs/components-loadingwrapper--docs' >LoadingWrapper</a> component."
+            "Datawrapper iframe with <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events' target='_blank'>event dispatching</a> enabled. All interaction events are accessible via <code>on:eventname</code> (<b>no periods</b>) on the `DatawrapperIframe` Svelte component itself. The complete event list and associated descriptions can be found <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events' target='_blank'>here</a>.<br/><br/>Examples of how to setup \"switching\" between Datawrapper charts with a dropdown or button controls can be found <a href='/docs/examples-datawrapper-switching--docs'>in the Examples section here</a>.<br/><br/>In April 2024, the <code>vis.rendered</code> event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.<br><br>The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the <a href='/docs/components-loadingwrapper--docs' >LoadingWrapper</a> component."
         }
       }
     }
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index 1ce98461..cbc7b65f 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -13,7 +13,7 @@
       docs: {
         description: {
           component:
-            'Wrapper to display a loading spinner graphic while content is loading. All children wrapped in component. Accepts an alternative graphic for the "graphic" named slot.'
+            'Wrapper to display a loading spinner graphic while content is loading. Exposes `setChildLoading()` and `setChildLoaded()` to be used by children as an alternative method of setting `isChildLoading` boolean. Accepts an alternative graphic for the "graphic" named slot.'
         }
       }
     }