Do not destroy rendered contents on addon tab changes

packages/storybook-addon-designs/src/register/components/Tabs.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, ReactNode, useEffect, useState } from "react";
+import { DependencyList, FC, ReactNode, useEffect, useState } from "react";
 import { jsx } from "@storybook/theming";
 
 import { Tabs as SbTabs } from "@storybook/components";
@@ -13,14 +13,20 @@ export interface Tab {
 
 export interface TabsProps {
   tabs: readonly Tab[];
+
+  /**
+   * Effect trigger for tab initialization. Everytime this dependency list is
+   * updated, the selection goes to the first tab.
+   */
+  deps?: DependencyList;
 }
 
-export const Tabs: FC<TabsProps> = ({ tabs }) => {
+export const Tabs: FC<TabsProps> = ({ tabs, deps = [] }) => {
   const [selected, setSelected] = useState(tabs[0].id);
 
   useEffect(() => {
     setSelected(tabs[0].id);
-  }, [tabs]);
+  }, deps);
 
   return (
     <SbTabs absolute selected={selected} actions={{ onSelect: setSelected }}>

packages/storybook-addon-designs/src/register/components/Wrapper.tsx

@@ -115,7 +115,7 @@ export const Wrapper: FC<Props> = ({ config }) => {
     return <div>{tabs[0].content}</div>;
   }
 
-  return <Tabs tabs={tabs} />;
+  return <Tabs tabs={tabs} deps={[config]} />;
 };
 
 export default Wrapper;

packages/storybook-addon-designs/src/register/containers/Wrapper.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import { jsx } from "@storybook/theming";
 import { useParameter, useStorybookState } from "@storybook/api";
 
@@ -13,12 +13,33 @@ interface Props {
 }
 
 export const Wrapper: FC<Props> = ({ active }) => {
-  if (!active) {
+  const state = useStorybookState();
+  const config = useParameter(ParameterName) as Config;
+
+  // Whether the addon panel has been visible to a user with the config.
+  const [onceRevealed, setOnceRevealed] = useState(active);
+
+  // When a user navigates to another story or updates a story parameter,
+  // sync `onceRevealed` to `active`.
+  useEffect(() => {
+    setOnceRevealed(active);
+  }, [config]);
+
+  // When a user enters the "Design" tab, mark the addon panel "once revealed".
+  useEffect(() => {
+    if (active) {
+      setOnceRevealed(true);
+    }
+  }, [active]);
+
+  // If a user has not entered the "Design" tab for the current story yet,
+  // do not render panel contents. This makes loading embeds explicit and
+  // prevents embedded sites from obtaining viewport (iframe) size behind,
+  // which often leads to incorrect measurements.
+  if (!onceRevealed) {
     return null;
   }
 
-  const state = useStorybookState();
-  const config = useParameter(ParameterName) as Config;
   return <Pure key={state.storyId} config={config} />;
 };
 

packages/storybook-addon-designs/src/register/index.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
-import addons, { types, Addon } from "@storybook/addons";
+import addons, { types } from "@storybook/addons";
 import { useParameter } from "@storybook/api";
+import { AddonPanel } from "@storybook/components";
 import { jsx } from "@storybook/theming";
 
 import { AddonName, PanelName, ParameterName } from "../addon";
@@ -30,21 +31,35 @@ export default function register(renderTarget: "panel" | "tab") {
       return (param.name || DEFAULT_TAB_NAME) + " (1)";
     };
 
-    const render: Addon["render"] = ({ active, key }) => (
-      <Wrapper key={key} active={!!active} />
-    );
-
     if (renderTarget === "tab") {
       addons.add(PanelName, {
         title: DEFAULT_TAB_NAME,
-        render,
+        render({ active, key }) {
+          if (!active) {
+            // NOTE: Return type of render is `ReactElement`, hence returning `null` causes
+            //       type error. I'm using `<noscript>` in place of `null`.
+            return <noscript key={key} />;
+          }
+
+          return <Wrapper key={key} active />;
+        },
         type: types.TAB,
         paramKey: ParameterName,
         route: ({ storyId }) => `/design/${storyId}`,
         match: ({ viewMode }) => viewMode === "design",
       });
     } else {
-      addons.addPanel(PanelName, { title, paramKey: ParameterName, render });
+      addons.addPanel(PanelName, {
+        title,
+        paramKey: ParameterName,
+        render({ active, key }) {
+          return (
+            <AddonPanel key={key} active={!!active}>
+              <Wrapper active={!!active} />
+            </AddonPanel>
+          );
+        },
+      });
     }
   });
 }