remove the Gatsby flickering artifact by using PureComponent

dnbexperience · Nov 23, 2018 · 1ad50f5 · 1ad50f5
1 parent 0597316
commit 1ad50f5
Show file tree

Hide file tree

Showing 93 changed files with 231 additions and 241 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -25,19 +25,19 @@ jobs:
             - ~/.cache/yarn
 
       - run:
-          name: prepublish
+          name: Prepublish the ui-lib
           command: yarn prepublish-ci
 
       - run:
-          name: build
+          name: Build the portal
           command: yarn build-ci
 
       - run:
-          name: deploy
+          name: Deploy the portal
           command: yarn deploy-ci
 
       - run:
-          name: release on NPM
+          name: Release on NPM
           command: yarn publish-ci
 
   test:
@@ -74,10 +74,12 @@ workflows:
             branches:
               ignore:
                 - master
+                - /.*rc-.*|^rc\//
+                - /.*wip-.*|^wip\//
                 - gh-pages
       - deploy:
           filters:
             branches:
               only:
                 - master
-                - /rc-.*/
+                - /.*rc-.*|^rc\//
diff --git a/packages/dnb-design-system-portal/gatsby-config.js b/packages/dnb-design-system-portal/gatsby-config.js
@@ -15,24 +15,9 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-sharp',
-    'gatsby-plugin-offline',
+    // 'gatsby-plugin-offline',
     'gatsby-plugin-catch-links',
     'gatsby-plugin-react-helmet',
-    'gatsby-plugin-emotion',
-    'gatsby-plugin-sass',
-    {
-      resolve: 'gatsby-plugin-postcss',
-      options: {
-        postCssPlugins: [
-          require('postcss-calc'),
-          require('postcss-custom-properties'),
-          require('postcss-preset-env')({ stage: 0 }),
-          require('autoprefixer')({
-            browsers: ['last 1 versions', 'explorer >= 11']
-          })
-        ]
-      }
-    },
     {
       resolve: 'gatsby-mdx',
       options: {
@@ -57,6 +42,21 @@ module.exports = {
         path: `${__dirname}/src/pages`,
         name: 'pages'
       }
-    }
+    },
+    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-plugin-postcss',
+      options: {
+        postCssPlugins: [
+          require('postcss-calc'),
+          require('postcss-custom-properties'),
+          require('postcss-preset-env')({ stage: 0 }),
+          require('autoprefixer')({
+            browsers: ['last 1 versions', 'explorer >= 11']
+          })
+        ]
+      }
+    },
+    'gatsby-plugin-emotion'
   ]
 }
diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -80,7 +80,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "fs-extra": "^7.0.1",
-    "gatsby": "^2.0.54",
+    "gatsby": "^2.0.55",
     "gatsby-link": "^2.0.6",
     "gatsby-mdx": "^0.2.0",
     "gatsby-plugin-catch-links": "^2.0.8",

diff --git a/packages/dnb-design-system-portal/scripts/deploy.js b/packages/dnb-design-system-portal/scripts/deploy.js
@@ -42,7 +42,7 @@ const run = () => {
       if (error) {
         log.fail(`Failed to deploy! \n${error.message}`)
       }
-      log.succeed(`Deployed successfully ${currentVersion}!`)
+      log.succeed(`Deployed successfully, version ${currentVersion}!`)
     }
   )
 }

diff --git a/packages/dnb-design-system-portal/src/pages/404.js b/packages/dnb-design-system-portal/src/pages/404.js
@@ -3,11 +3,11 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'react-emotion'
 
-export default class PageNotFound extends Component {
+export default class PageNotFound extends PureComponent {
   static propTypes = {
     location: PropTypes.object.isRequired
   }

diff --git a/packages/dnb-design-system-portal/src/pages/index.js b/packages/dnb-design-system-portal/src/pages/index.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component, Fragment } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import StickyMenuBar from '../shared/menu/StickyMenuBar'
 import MainMenu from '../shared/menu/MainMenu'
 
@@ -12,7 +12,7 @@ import 'dnb-ui-lib/src/style/patterns' // import ony patterns
 import 'dnb-ui-lib/src/style' // import both all components and the defualt theme
 
 // react component
-export default class App extends Component {
+export default class App extends PureComponent {
   render() {
     return (
       <Fragment>

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-1/index.js b/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-1/index.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { css } from 'react-emotion'
 import Head from 'react-helmet'
 import dnb, {
@@ -29,7 +29,7 @@ const style = css`
   background: white;
 `
 
-export default class ExampleAppPage extends Component {
+export default class ExampleAppPage extends PureComponent {
   componentDidMount() {
     dnb.enableWebComponents()
   }

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js b/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { css } from 'react-emotion'
 import { Modal } from 'dnb-ui-lib/src'
@@ -92,7 +92,7 @@ const style = css`
   }
 `
 
-export default class LoanSausage extends Component {
+export default class LoanSausage extends PureComponent {
   static propTypes = {
     equity: PropTypes.string.isRequired,
     currency: PropTypes.string.isRequired,
@@ -167,7 +167,7 @@ export default class LoanSausage extends Component {
   }
 }
 
-class SausageItem extends Component {
+class SausageItem extends PureComponent {
   static propTypes = {
     title: PropTypes.string.isRequired,
     percentage: PropTypes.string.isRequired

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/index.js b/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/index.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { css } from 'react-emotion'
 import Head from 'react-helmet'
 import dnb, {
@@ -27,7 +27,7 @@ const style = css`
   background: white;
 `
 
-export default class ExampleAppPage extends Component {
+export default class ExampleAppPage extends PureComponent {
   componentDidMount() {
     dnb.enableWebComponents()
   }

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Table.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Table.js
@@ -3,11 +3,11 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Color from 'color'
 
-export default class Table extends Component {
+export default class Table extends PureComponent {
   static propTypes = {
     children: PropTypes.node.isRequired
   }

diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import styled, { css, cx } from 'react-emotion'
@@ -91,7 +91,7 @@ const Box = styled.div`
   flex-direction: column;
 `
 
-export default class Card extends Component {
+export default class Card extends PureComponent {
   static propTypes = {
     url: PropTypes.string.isRequired,
     customStyle: PropTypes.string,

diff --git a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { injectGlobal, css } from 'react-emotion'
 import classnames from 'classnames'
@@ -94,7 +94,7 @@ const toolbarStyle = css`
   background-color: #fff;
 `
 
-export default class MainMenu extends Component {
+export default class MainMenu extends PureComponent {
   static propTypes = {
     setAsOverlay: PropTypes.bool,
     enableOverlay: PropTypes.bool,

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -7,12 +7,12 @@ import { StaticQuery, graphql } from 'gatsby'
 
 import Link from '../parts/Link'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { PureComponent } from 'react'
 import styled, { injectGlobal, cx } from 'react-emotion'
 
 const showAlwaysMenuItems = [] // like "uilib" som someting like that
 
-export default class SidebarLayout extends React.Component {
+export default class SidebarLayout extends PureComponent {
   static propTypes = {
     location: PropTypes.object.isRequired,
     showAll: PropTypes.bool

diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -3,15 +3,15 @@
  *
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { css, injectGlobal } from 'react-emotion'
 // import Head from 'react-helmet'
 import MainMenu from './MainMenu'
 import gridSvg from '../../../static/assets/images/grid-32x32.svg'
 import { FormLabel, Switch, Logo } from 'dnb-ui-lib/src'
 
-export default class StickyMenuBar extends Component {
+export default class StickyMenuBar extends PureComponent {
   state = {
     showOverlayMenu: false,
     showGrid: null

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -9,7 +9,7 @@ import 'dnb-ui-lib/src/style' // import both all components and the defualt them
 // import 'dnb-ui-lib/src/style/themes/dnb-theme-open-banking.scss'
 
 import { pageFocus } from 'dnb-ui-lib/src/shared/tools'
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { Link } from 'gatsby'
 
 import PropTypes from 'prop-types'
@@ -19,7 +19,7 @@ import { markdownStyle } from './Markdown'
 import styled, { cx } from 'react-emotion'
 import { buildVersion } from '../../../package.json'
 
-class Layout extends Component {
+class Layout extends PureComponent {
   static propTypes = {
     children: PropTypes.node.isRequired,
     location: PropTypes.object.isRequired,

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Markdown.js b/packages/dnb-design-system-portal/src/shared/parts/Markdown.js
@@ -3,15 +3,15 @@
  *
  */
 
-import React, { Component, Fragment } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 
 import PropTypes from 'prop-types'
 import dnb from 'dnb-ui-lib/src'
 import portalStyle from './PortalStyle'
 
 // import { CodeRenderer } from './Code'
 // import ReactMarkdown from 'react-markdown'
-// export default class Markdown extends Component {
+// export default class Markdown extends PureComponent {
 //   static propTypes = {
 //     children: PropTypes.string.isRequired
 //   }
@@ -35,7 +35,7 @@ import portalStyle from './PortalStyle'
 //   }
 // }
 
-export class Html extends Component {
+export class Html extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     value: PropTypes.string
@@ -79,7 +79,7 @@ export class Html extends Component {
   }
 }
 
-// export class Script extends Component {
+// export class Script extends PureComponent {
 //   static propTypes = {
 //     children: PropTypes.node,
 //     value: PropTypes.string

diff --git a/packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.js b/packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.js
@@ -2,13 +2,13 @@
  * List all the Icons available
  */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import * as PrimaryIcons from 'dnb-ui-lib/src/icons/primary_icons'
 import * as SecondaryIcons from 'dnb-ui-lib/src/icons/secondary_icons'
 import styled from 'react-emotion'
 
-export default class Icons extends Component {
+export default class Icons extends PureComponent {
   state = { iconsToRender: [] }
   static propTypes = {
     type: PropTypes.string

diff --git a/packages/dnb-design-system-portal/src/shared/parts/uilib/Code.js b/packages/dnb-design-system-portal/src/shared/parts/uilib/Code.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { Component, Fragment } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 
 import Beautifier from './code_beautifier'
 import PropTypes from 'prop-types'
@@ -15,7 +15,7 @@ import pretty from 'pretty' // https://www.npmjs.com/package/pretty
 // import plugins from 'prettier/parser-parse5'
 import CodeBlock from '../../inlineTags/CodeBlock'
 
-export default class Code extends Component {
+export default class Code extends PureComponent {
   static propTypes = {
     language: PropTypes.string,
     raw: PropTypes.string,
@@ -94,7 +94,7 @@ export default class Code extends Component {
   }
 }
 
-export class CodeRenderer extends Component {
+export class CodeRenderer extends PureComponent {
   static propTypes = {
     language: PropTypes.string,
     children: PropTypes.oneOfType([

diff --git a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js
@@ -5,7 +5,7 @@
 
 import { Button, Tabs } from 'dnb-ui-lib/src'
 import Code, { CodeRenderer } from './Code'
-import React, { Component, Fragment } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 
 import { CloseButton } from 'dnb-ui-lib/src/components/modal'
 import Link from 'gatsby-link'
@@ -45,7 +45,7 @@ const tabsWrapperStyle = css`
   }
 `
 
-class ComponentItemWrapper extends Component {
+class ComponentItemWrapper extends PureComponent {
   static propTypes = {
     ExampleCode: PropTypes.string,
     Description: PropTypes.func.isRequired,