refactor(components): made announcement banner animation smoothier

grafana · Oct 15, 2020 · a38e4d3 · a38e4d3
1 parent 22651da
commit a38e4d3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 31 deletions.
diff --git a/plugins/gatsby-plugin-announcement-banner/wrap-page.js b/plugins/gatsby-plugin-announcement-banner/wrap-page.js
@@ -24,7 +24,7 @@ const UniversalWrapper = ({ element, pluginOptions }) => {
   const isGAEnabled =
     label && action && readMoreButtonCategory && dismissButtonCategory;
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     setShouldBeMounted(true);
   }, []);
 

diff --git a/src/components/shared/announcement-banner/announcement-banner.js b/src/components/shared/announcement-banner/announcement-banner.js
@@ -47,38 +47,40 @@ const AnnouncementBanner = ({
     : () => setAnimateOut(true);
 
   return isShown ? (
-    <div
-      className={classNames(
-        styles.wrapper,
-        { [styles.in]: animateIn && !animateOut },
-        { [styles.out]: animateOut },
-      )}
-      onTransitionEnd={isMobile ? undefined : onTransitionEndHandler}
-    >
-      <div className={styles.backgroundPatternWrapper}>
-        <Pattern />
-        <Pattern />
-      </div>
-      <div className={'container'}>
-        <div className={styles.inner}>
-          <p className={styles.message}>{text}</p>
-          <Button
-            tag="a"
-            rel="noreferrer"
-            href={link}
-            className={styles.btn}
-            size={'sm'}
-            onClick={readMoreButtonClickHandler}
-          >
-            {buttonText}
-          </Button>
+    <div style={{ height: isMobile ? 'auto' : '60px' }}>
+      <div
+        className={classNames(
+          styles.wrapper,
+          { [styles.in]: animateIn && !animateOut },
+          { [styles.out]: animateOut },
+        )}
+        onTransitionEnd={isMobile ? undefined : onTransitionEndHandler}
+      >
+        <div className={styles.backgroundPatternWrapper}>
+          <Pattern />
+          <Pattern />
+        </div>
+        <div className={'container'}>
+          <div className={styles.inner}>
+            <p className={styles.message}>{text}</p>
+            <Button
+              tag="a"
+              rel="noreferrer"
+              href={link}
+              className={styles.btn}
+              size={'sm'}
+              onClick={readMoreButtonClickHandler}
+            >
+              {buttonText}
+            </Button>
+          </div>
         </div>
+        <button
+          type="button"
+          className={styles.btnClose}
+          onClick={onCloseButtonClick}
+        />
       </div>
-      <button
-        type="button"
-        className={styles.btnClose}
-        onClick={onCloseButtonClick}
-      />
     </div>
   ) : null;
 };