Merge pull request #3520 from Grimones/fix-preview-render-order

Fix render order in preview
storybookjs · May 2, 2018 · 3539625 · 3539625
2 parents 8c7749c + fda07df
commit 3539625
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/app/angular/src/client/preview/render.js b/app/angular/src/client/preview/render.js
@@ -1,6 +1,6 @@
 import { renderNgApp } from './angular/helpers';
 
 export default function render({ story, showMain }) {
-  renderNgApp(story);
   showMain();
+  renderNgApp(story);
 }
diff --git a/app/mithril/src/client/preview/render.js b/app/mithril/src/client/preview/render.js
@@ -21,6 +21,6 @@ export default function renderMain({ story, selectedKind, selectedStory, showMai
     return;
   }
 
-  m.mount(rootEl, { view: () => m(element) });
   showMain();
+  m.mount(rootEl, { view: () => m(element) });
 }
diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.js
@@ -17,6 +17,8 @@ export default function renderMain({ story, selectedKind, selectedStory, showMai
     });
     return;
   }
+
+  showMain();
   if (typeof component === 'string') {
     rootElement.innerHTML = component;
   } else if (component instanceof TemplateResult) {
@@ -28,5 +30,4 @@ export default function renderMain({ story, selectedKind, selectedStory, showMai
     rootElement.innerHTML = '';
     rootElement.appendChild(component);
   }
-  showMain();
 }
diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js
@@ -43,6 +43,6 @@ export default function renderMain({ story, selectedKind, selectedStory, showMai
   // This could leads to issues like below:
   //    https://github.com/storybooks/react-storybook/issues/81
   ReactDOM.unmountComponentAtNode(rootEl);
-  render(element, rootEl);
   showMain();
+  render(element, rootEl);
 }
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
@@ -32,11 +32,11 @@ export default function render({
     return;
   }
 
+  showMain();
   renderRoot({
     el: '#root',
     render(h) {
       return h('div', { attrs: { id: 'root' } }, [h(component)]);
     },
   });
-  showMain();
 }