From 967597c12fc5d227de4c1767bf82bc751f2fe0d0 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 18 Jun 2019 14:36:51 +0200
Subject: [PATCH] feat(gatsby-cli): move progressbar into ink (#14220)

---
 packages/gatsby-cli/package.json              |   1 +
 packages/gatsby-cli/src/reporter/index.js     |  81 +++++++++++-
 .../reporters/ink/components/progress-bar.js  |  43 +++++++
 .../components/{activity.js => spinner.js}    |   7 --
 .../src/reporter/reporters/ink/reporter.js    | 119 +++++++++++-------
 .../src/reporter/reporters/yurnalist/index.js |  88 +++++++++----
 .../gatsby-cli/src/util/calc-elapsed-time.js  |   7 ++
 packages/gatsby-plugin-sharp/package.json     |   2 +-
 .../src/__tests__/utils.js                    |  23 ++++
 packages/gatsby-plugin-sharp/src/scheduler.js |  20 +--
 packages/gatsby-plugin-sharp/src/utils.js     |  29 +++++
 .../gatsby-source-filesystem/package.json     |   2 +-
 .../src/__tests__/create-remote-file-node.js  |  36 +++---
 .../src/__tests__/utils.js                    |  30 ++++-
 .../src/create-remote-file-node.js            |  28 +++--
 .../gatsby-source-filesystem/src/utils.js     |  29 +++++
 yarn.lock                                     |  10 +-
 17 files changed, 429 insertions(+), 126 deletions(-)
 create mode 100644 packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js
 rename packages/gatsby-cli/src/reporter/reporters/ink/components/{activity.js => spinner.js} (61%)
 create mode 100644 packages/gatsby-cli/src/util/calc-elapsed-time.js
 create mode 100644 packages/gatsby-plugin-sharp/src/__tests__/utils.js
 create mode 100644 packages/gatsby-plugin-sharp/src/utils.js

diff --git a/packages/gatsby-cli/package.json b/packages/gatsby-cli/package.json
index cc2fcecfd89f2..a5af209fea431 100644
--- a/packages/gatsby-cli/package.json
+++ b/packages/gatsby-cli/package.json
@@ -33,6 +33,7 @@
     "object.entries": "^1.1.0",
     "opentracing": "^0.14.3",
     "pretty-error": "^2.1.1",
+    "progress": "^2.0.3",
     "prompts": "^2.1.0",
     "react": "^16.8.4",
     "resolve-cwd": "^2.0.0",
diff --git a/packages/gatsby-cli/src/reporter/index.js b/packages/gatsby-cli/src/reporter/index.js
index d0d4c4e71bd6b..37d2581092869 100644
--- a/packages/gatsby-cli/src/reporter/index.js
+++ b/packages/gatsby-cli/src/reporter/index.js
@@ -93,13 +93,88 @@ const reporter: Reporter = {
     const spanArgs = parentSpan ? { childOf: parentSpan } : {}
     const span = tracer.startSpan(name, spanArgs)
 
-    const activity = reporterInstance.createActivity(name)
+    const activity = reporterInstance.createActivity({
+      type: `spinner`,
+      id: name,
+      status: ``,
+    })
 
     return {
-      ...activity,
+      start() {
+        activity.update({
+          startTime: process.hrtime(),
+        })
+      },
+      setStatus(status) {
+        activity.update({
+          status: status,
+        })
+      },
       end() {
         span.finish()
-        activity.end()
+        activity.done()
+      },
+      span,
+    }
+  },
+
+  /**
+   * Create a progress bar for an activity
+   * @param {string} name - Name of activity.
+   * @param {number} total - Total items to be processed.
+   * @param {number} start - Start count to show.
+   * @param {ActivityArgs} activityArgs - optional object with tracer parentSpan
+   * @returns {ActivityTracker} The activity tracker.
+   */
+  createProgress(
+    name: string,
+    total,
+    start = 0,
+    activityArgs: ActivityArgs = {}
+  ): ActivityTracker {
+    const { parentSpan } = activityArgs
+    const spanArgs = parentSpan ? { childOf: parentSpan } : {}
+    const span = tracer.startSpan(name, spanArgs)
+
+    let hasStarted = false
+    let current = start
+    const activity = reporterInstance.createActivity({
+      type: `progress`,
+      id: name,
+      current,
+      total,
+    })
+
+    return {
+      start() {
+        if (hasStarted) {
+          return
+        }
+
+        hasStarted = true
+        activity.update({
+          startTime: process.hrtime(),
+        })
+      },
+      setStatus(status) {
+        activity.update({
+          status: status,
+        })
+      },
+      tick() {
+        activity.update({
+          current: ++current,
+        })
+      },
+      done() {
+        span.finish()
+        activity.done()
+      },
+      set total(value) {
+        total = value
+        activity.update({
+          total: value,
+        })
       },
       span,
     }
diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js b/packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js
new file mode 100644
index 0000000000000..6edc4253cbf1c
--- /dev/null
+++ b/packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js
@@ -0,0 +1,43 @@
+import React from "react"
+import { Box } from "ink"
+import calcElapsedTime from "../../../../util/calc-elapsed-time"
+
+const maxWidth = 30
+const minWidth = 10
+
+const getLength = prop => String(prop).length
+
+export default function ProgressBar({ message, current, total, startTime }) {
+  const percentage = total ? Math.round((current / total) * 100) : 0
+  const terminalWidth = process.stdout.columns || 80
+  const availableWidth =
+    terminalWidth -
+    getLength(message) -
+    getLength(current) -
+    getLength(total) -
+    getLength(percentage) -
+    11 // margins + extra characters
+
+  const progressBarWidth = Math.max(
+    minWidth,
+    Math.min(maxWidth, availableWidth)
+  )
+
+  return (
+    <Box flexDirection="row">
+      <Box marginRight={3} width={progressBarWidth}>
+        [
+        <Box width={progressBarWidth - 2}>
+          {`=`.repeat(((progressBarWidth - 2) * percentage) / 100)}
+        </Box>
+        ]
+      </Box>
+      <Box marginRight={1}>{calcElapsedTime(startTime)} s</Box>
+      <Box marginRight={1}>
+        {current}/{total}
+      </Box>
+      <Box marginRight={1}>{`` + percentage}%</Box>
+      <Box textWrap="truncate">{message}</Box>
+    </Box>
+  )
+}
diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js b/packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js
similarity index 61%
rename from packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js
rename to packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js
index 1dcb28fae507b..10f8a8033e57f 100644
--- a/packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js
+++ b/packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js
@@ -1,14 +1,7 @@
 import React from "react"
-import convertHrtime from "convert-hrtime"
 import { Box } from "ink"
 import Spinner from "ink-spinner"
 
-export const calcElapsedTime = startTime => {
-  const elapsed = process.hrtime(startTime)
-
-  return convertHrtime(elapsed)[`seconds`].toFixed(3)
-}
-
 export default function Activity({ name, status }) {
   let statusText = name
   if (status) {
diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js b/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js
index f5e220638e742..0c26af36de5dc 100644
--- a/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js
+++ b/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js
@@ -1,19 +1,29 @@
 import React from "react"
 import { Static, Box } from "ink"
-import { isCI } from "ci-info"
 import chalk from "chalk"
-import Activity, { calcElapsedTime } from "./components/activity"
+import Spinner from "./components/spinner"
+import ProgressBar from "./components/progress-bar"
 import { Message } from "./components/messages"
+import isTTY from "../../../util/is-tty"
+import calcElapsedTime from "../../../util/calc-elapsed-time"
+
+const showProgress = isTTY
+
+const successTextGenerator = {
+  spinner: activity => {
+    let successText = `${activity.id} - ${calcElapsedTime(
+      activity.startTime
+    )} s`
+    if (activity.status) {
+      successText += ` — ${activity.status}`
+    }
 
-const showProgress = process.stdout.isTTY && !isCI
-
-const generateActivityFinishedText = (name, activity) => {
-  let successText = `${name} - ${calcElapsedTime(activity.startTime)} s`
-  if (activity.status) {
-    successText += ` — ${activity.status}`
-  }
-
-  return successText
+    return successText
+  },
+  progress: activity =>
+    `${activity.id} — ${activity.current}/${activity.total} - ${calcElapsedTime(
+      activity.startTime
+    )} s`,
 }
 
 export default class GatsbyReporter extends React.Component {
@@ -26,44 +36,40 @@ export default class GatsbyReporter extends React.Component {
 
   format = chalk
 
-  createActivity = name => {
+  createActivity = ({ id, ...options }) => {
+    this.setState(state => {
+      return {
+        activities: {
+          ...state.activities,
+          [id]: {
+            id,
+            ...options,
+          },
+        },
+      }
+    })
+
     return {
-      start: () => {
-        this.setState(state => {
-          return {
-            activities: {
-              ...state.activities,
-              [name]: {
-                status: ``,
-                startTime: process.hrtime(),
-              },
-            },
-          }
-        })
-      },
-      setStatus: status => {
+      update: newState => {
         this.setState(state => {
-          const activity = state.activities[name]
-
           return {
             activities: {
               ...state.activities,
-              [name]: {
-                ...activity,
-                status: status,
+              [id]: {
+                ...state.activities[id],
+                ...newState,
               },
             },
           }
         })
       },
-      end: () => {
-        const activity = this.state.activities[name]
-
-        this.success(generateActivityFinishedText(name, activity))
+      done: () => {
+        const activity = this.state.activities[id]
+        this.success(successTextGenerator[activity.type]({ id, ...activity }))
 
         this.setState(state => {
           const activities = { ...state.activities }
-          delete activities[name]
+          delete activities[id]
 
           return {
             activities,
@@ -116,27 +122,48 @@ export default class GatsbyReporter extends React.Component {
   }
 
   render() {
+    const { activities, messages, disableColors } = this.state
+
+    const spinners = []
+    const progressBars = []
+    if (showProgress) {
+      Object.keys(activities).forEach(activityName => {
+        const activity = activities[activityName]
+        if (activity.type === `spinner`) {
+          spinners.push(activity)
+        }
+        if (activity.type === `progress` && activity.startTime) {
+          progressBars.push(activity)
+        }
+      })
+    }
+
     return (
       <Box flexDirection="column">
         <Box flexDirection="column">
           <Static>
-            {this.state.messages.map((msg, index) => (
+            {messages.map((msg, index) => (
               <Box textWrap="wrap" key={index}>
-                <Message type={msg.type} hideColors={this.state.disableColors}>
+                <Message type={msg.type} hideColors={disableColors}>
                   {msg.text}
                 </Message>
               </Box>
             ))}
           </Static>
 
-          {showProgress &&
-            Object.keys(this.state.activities).map(activityName => (
-              <Activity
-                key={activityName}
-                name={activityName}
-                {...this.state.activities[activityName]}
-              />
-            ))}
+          {spinners.map(activity => (
+            <Spinner key={activity.id} name={activity.id} {...activity} />
+          ))}
+
+          {progressBars.map(activity => (
+            <ProgressBar
+              key={activity.id}
+              message={activity.id}
+              total={activity.total}
+              current={activity.current}
+              startTime={activity.startTime}
+            />
+          ))}
         </Box>
       </Box>
     )
diff --git a/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js b/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js
index 45e3954d5a4fb..537e25eb018a5 100644
--- a/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js
+++ b/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js
@@ -1,7 +1,8 @@
 // @flow
 
 const { createReporter } = require(`yurnalist`)
-const convertHrtime = require(`convert-hrtime`)
+const ProgressBar = require(`progress`)
+const calcElapsedTime = require(`../../../util/calc-elapsed-time`)
 
 const VERBOSE = process.env.gatsby_log_level === `verbose`
 const reporter = createReporter({ emoji: true, verbose: VERBOSE })
@@ -29,36 +30,69 @@ module.exports = {
   info: reporter.info.bind(reporter),
   warn: reporter.warn.bind(reporter),
   log: reporter.log.bind(reporter),
-  /**
-   * Time an activity.
-   * @param {string} name - Name of activity.
-   * @returns {string} The elapsed time of activity.
-   */
-  createActivity(name) {
-    const spinner = reporter.activity()
-    const start = process.hrtime()
-    let status
 
-    const elapsedTime = () => {
-      var elapsed = process.hrtime(start)
-      return `${convertHrtime(elapsed)[`seconds`].toFixed(3)} s`
+  createActivity: activity => {
+    let start
+
+    if (activity.type === `spinner`) {
+      const spinner = reporter.activity()
+      let status
+
+      return {
+        update: newState => {
+          if (newState.startTime) {
+            start = newState.startTime
+            spinner.tick(activity.id)
+          }
+          if (newState.status) {
+            status = newState.status
+            spinner.tick(`${activity.id} — ${newState.status}`)
+          }
+        },
+        done: () => {
+          const str = status
+            ? `${activity.id} — ${calcElapsedTime(start)} — ${status}`
+            : `${activity.id} — ${calcElapsedTime(start)}`
+          reporter.success(str)
+          spinner.end()
+        },
+      }
+    }
+
+    if (activity.type === `progress`) {
+      const bar = new ProgressBar(
+        ` [:bar] :current/:total :elapsed s :percent ${activity.id}`,
+        {
+          total: 0,
+          width: 30,
+          clear: true,
+        }
+      )
+      return {
+        update: newState => {
+          if (newState.startTime) {
+            start = newState.startTime
+          }
+          if (newState.total) {
+            bar.total = newState.total
+          }
+          if (newState.current) {
+            bar.tick()
+          }
+        },
+        done: () => {
+          reporter.success(
+            `${activity.id} — ${bar.curr}/${bar.total} - ${calcElapsedTime(
+              start
+            )} s`
+          )
+        },
+      }
     }
 
     return {
-      start: () => {
-        spinner.tick(name)
-      },
-      setStatus: s => {
-        status = s
-        spinner.tick(`${name} — ${status}`)
-      },
-      end: () => {
-        const str = status
-          ? `${name} — ${elapsedTime()} — ${status}`
-          : `${name} — ${elapsedTime()}`
-        reporter.success(str)
-        spinner.end()
-      },
+      update: () => {},
+      done: () => {},
     }
   },
 }
diff --git a/packages/gatsby-cli/src/util/calc-elapsed-time.js b/packages/gatsby-cli/src/util/calc-elapsed-time.js
new file mode 100644
index 0000000000000..336ed74eee561
--- /dev/null
+++ b/packages/gatsby-cli/src/util/calc-elapsed-time.js
@@ -0,0 +1,7 @@
+const convertHrtime = require(`convert-hrtime`)
+
+module.exports = startTime => {
+  const elapsed = process.hrtime(startTime)
+
+  return convertHrtime(elapsed)[`seconds`].toFixed(3)
+}
diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
index 4574ee4b62499..70f7b1b914aa8 100644
--- a/packages/gatsby-plugin-sharp/package.json
+++ b/packages/gatsby-plugin-sharp/package.json
@@ -19,7 +19,7 @@
     "mini-svg-data-uri": "^1.0.0",
     "potrace": "^2.1.1",
     "probe-image-size": "^4.0.0",
-    "progress": "^1.1.8",
+    "progress": "^2.0.3",
     "semver": "^5.6.0",
     "sharp": "^0.22.1",
     "svgo": "^1.2.0"
diff --git a/packages/gatsby-plugin-sharp/src/__tests__/utils.js b/packages/gatsby-plugin-sharp/src/__tests__/utils.js
new file mode 100644
index 0000000000000..fbf9a10c32338
--- /dev/null
+++ b/packages/gatsby-plugin-sharp/src/__tests__/utils.js
@@ -0,0 +1,23 @@
+jest.mock(`gatsby-cli/lib/reporter`)
+jest.mock(`progress`)
+const { createProgress } = require(`../utils`)
+const reporter = require(`gatsby-cli/lib/reporter`)
+const progress = require(`progress`)
+
+describe(`createProgress`, () => {
+  it(`should use createProgress from gatsby-cli when available`, () => {
+    createProgress(`test`)
+    expect(reporter.createProgress).toBeCalled()
+    expect(progress).not.toBeCalled()
+  })
+
+  it(`should fallback to a local implementation`, () => {
+    reporter.createProgress = null
+    const bar = createProgress(`test`)
+    expect(progress).toHaveBeenCalledTimes(1)
+    expect(bar).toHaveProperty(`start`, expect.any(Function))
+    expect(bar).toHaveProperty(`tick`, expect.any(Function))
+    expect(bar).toHaveProperty(`done`, expect.any(Function))
+    expect(bar).toHaveProperty(`total`)
+  })
+})
diff --git a/packages/gatsby-plugin-sharp/src/scheduler.js b/packages/gatsby-plugin-sharp/src/scheduler.js
index 21cd7fa223dc4..b91b9c489c0df 100644
--- a/packages/gatsby-plugin-sharp/src/scheduler.js
+++ b/packages/gatsby-plugin-sharp/src/scheduler.js
@@ -1,8 +1,8 @@
 const _ = require(`lodash`)
-const ProgressBar = require(`progress`)
 const { existsSync } = require(`fs`)
 const queue = require(`async/queue`)
 const { processFile } = require(`./process-file`)
+const { createProgress } = require(`./utils`)
 
 const toProcess = {}
 let totalJobs = 0
@@ -10,13 +10,14 @@ const q = queue((task, callback) => {
   task(callback)
 }, 1)
 
-const bar = new ProgressBar(
-  `Generating image thumbnails [:bar] :current/:total :elapsed secs :percent`,
-  {
-    total: 0,
-    width: 30,
+let bar
+// when the queue is empty we stop the progressbar
+q.drain = () => {
+  if (bar) {
+    bar.done()
   }
-)
+  totalJobs = 0
+}
 
 exports.scheduleJob = async (
   job,
@@ -50,6 +51,10 @@ exports.scheduleJob = async (
     deferred.resolve = resolve
     deferred.reject = reject
   })
+  if (totalJobs === 0) {
+    bar = createProgress(`Generating image thumbnails`)
+    bar.start()
+  }
 
   totalJobs += 1
 
@@ -107,6 +112,7 @@ function runJobs(
 
   // We're now processing the file's jobs.
   let imagesFinished = 0
+
   bar.total = totalJobs
 
   try {
diff --git a/packages/gatsby-plugin-sharp/src/utils.js b/packages/gatsby-plugin-sharp/src/utils.js
new file mode 100644
index 0000000000000..542be70d8c19a
--- /dev/null
+++ b/packages/gatsby-plugin-sharp/src/utils.js
@@ -0,0 +1,29 @@
+const ProgressBar = require(`progress`)
+const reporter = require(`gatsby-cli/lib/reporter`)
+
+// TODO remove in V3
+export function createProgress(message) {
+  if (reporter.createProgress) {
+    return reporter.createProgress(message)
+  }
+
+  const bar = new ProgressBar(
+    ` [:bar] :current/:total :elapsed s :percent ${message}`,
+    {
+      total: 0,
+      width: 30,
+      clear: true,
+    }
+  )
+
+  return {
+    start() {},
+    tick() {
+      bar.tick()
+    },
+    done() {},
+    set total(value) {
+      bar.total = value
+    },
+  }
+}
diff --git a/packages/gatsby-source-filesystem/package.json b/packages/gatsby-source-filesystem/package.json
index 5c9f425abbdcd..02068154b1205 100644
--- a/packages/gatsby-source-filesystem/package.json
+++ b/packages/gatsby-source-filesystem/package.json
@@ -17,7 +17,7 @@
     "md5-file": "^3.1.1",
     "mime": "^2.2.0",
     "pretty-bytes": "^4.0.2",
-    "progress": "^1.1.8",
+    "progress": "^2.0.3",
     "read-chunk": "^3.0.0",
     "valid-url": "^1.0.9",
     "xstate": "^3.1.0"
diff --git a/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js b/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js
index 44aa34d2cae53..899c2074b61d3 100644
--- a/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js
+++ b/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js
@@ -19,30 +19,31 @@ jest.mock(`got`, () => {
     stream: jest.fn(),
   }
 })
-jest.mock(
-  `progress`,
-  () =>
-    class ProgressBar {
-      static total = 0
-      static tick = jest.fn(() => (ProgressBar.total -= 1))
-
-      total = ProgressBar.total
-      tick = ProgressBar.tick
-    }
-)
+
+jest.mock(`gatsby-cli/lib/reporter`, () => {
+  return {
+    createProgress: jest.fn(),
+  }
+})
 jest.mock(`../create-file-node`, () => {
   return {
     createFileNode: jest.fn(),
   }
 })
+const { createProgress } = require(`gatsby-cli/lib/reporter`)
+const progressBar = {
+  start: jest.fn(),
+  total: 0,
+  tick: jest.fn(),
+}
+createProgress.mockImplementation(() => progressBar)
+
 const got = require(`got`)
-const ProgressBar = require(`progress`)
 const createRemoteFileNode = require(`../create-remote-file-node`)
 const { createFileNode } = require(`../create-file-node`)
 
 beforeEach(() => {
-  ProgressBar.total = 0
-  ProgressBar.tick.mockClear()
+  progressBar.tick.mockClear()
 })
 
 describe(`create-remote-file-node`, () => {
@@ -73,8 +74,8 @@ describe(`create-remote-file-node`, () => {
 
         expect(value).rejects.toMatch(`wrong url: `)
 
-        expect(ProgressBar.total).toBe(0)
-        expect(ProgressBar.tick).not.toHaveBeenCalled()
+        expect(progressBar.total).toBe(0)
+        expect(progressBar.tick).not.toHaveBeenCalled()
       })
     })
   })
@@ -141,7 +142,8 @@ describe(`create-remote-file-node`, () => {
     it(`invokes ProgressBar tick`, async () => {
       await setup()
 
-      expect(ProgressBar.tick).toHaveBeenCalledTimes(1)
+      expect(progressBar.total).toBe(1)
+      expect(progressBar.tick).toHaveBeenCalledTimes(1)
     })
 
     describe(`requesting remote image`, () => {
diff --git a/packages/gatsby-source-filesystem/src/__tests__/utils.js b/packages/gatsby-source-filesystem/src/__tests__/utils.js
index 298a7fe8f982a..f19121f8c05b3 100644
--- a/packages/gatsby-source-filesystem/src/__tests__/utils.js
+++ b/packages/gatsby-source-filesystem/src/__tests__/utils.js
@@ -1,4 +1,13 @@
-const { getRemoteFileExtension, getRemoteFileName, slash } = require(`../utils`)
+jest.mock(`gatsby-cli/lib/reporter`)
+jest.mock(`progress`)
+const {
+  getRemoteFileExtension,
+  getRemoteFileName,
+  createProgress,
+  slash,
+} = require(`../utils`)
+const reporter = require(`gatsby-cli/lib/reporter`)
+const progress = require(`progress`)
 
 describe(`create remote file node`, () => {
   it(`can correctly retrieve file name and extensions`, () => {
@@ -23,6 +32,24 @@ describe(`create remote file node`, () => {
   })
 })
 
+describe(`createProgress`, () => {
+  it(`should use createProgress from gatsby-cli when available`, () => {
+    createProgress(`test`)
+    expect(reporter.createProgress).toBeCalled()
+    expect(progress).not.toBeCalled()
+  })
+
+  it(`should fallback to a local implementation`, () => {
+    reporter.createProgress = null
+    const bar = createProgress(`test`)
+    expect(progress).toHaveBeenCalledTimes(1)
+    expect(bar).toHaveProperty(`start`, expect.any(Function))
+    expect(bar).toHaveProperty(`tick`, expect.any(Function))
+    expect(bar).toHaveProperty(`done`, expect.any(Function))
+    expect(bar).toHaveProperty(`total`)
+  })
+})
+
 describe(`slash path`, () => {
   it(`can correctly slash path`, () => {
     ;[
@@ -34,6 +61,7 @@ describe(`slash path`, () => {
       expect(slash(path)).toBe(expectRes)
     })
   })
+
   it(`does not modify extended length paths`, () => {
     const extended = `\\\\?\\some\\path`
     expect(slash(extended)).toBe(extended)
diff --git a/packages/gatsby-source-filesystem/src/create-remote-file-node.js b/packages/gatsby-source-filesystem/src/create-remote-file-node.js
index 8471d1dbf4e1c..a764a5384d565 100644
--- a/packages/gatsby-source-filesystem/src/create-remote-file-node.js
+++ b/packages/gatsby-source-filesystem/src/create-remote-file-node.js
@@ -6,19 +6,15 @@ const { isWebUri } = require(`valid-url`)
 const Queue = require(`better-queue`)
 const readChunk = require(`read-chunk`)
 const fileType = require(`file-type`)
-const ProgressBar = require(`progress`)
+const { createProgress } = require(`./utils`)
 
 const { createFileNode } = require(`./create-file-node`)
 const { getRemoteFileExtension, getRemoteFileName } = require(`./utils`)
 const cacheId = url => `create-remote-file-node-${url}`
 
-const bar = new ProgressBar(
-  `Downloading remote files [:bar] :current/:total :elapsed secs :percent`,
-  {
-    total: 0,
-    width: 30,
-  }
-)
+let bar
+// Keep track of the total number of jobs we push in the queue
+let totalJobs = 0
 
 /********************
  * Type Definitions *
@@ -84,6 +80,14 @@ const queue = new Queue(pushToQueue, {
   concurrent: process.env.GATSBY_CONCURRENT_DOWNLOAD || 200,
 })
 
+// when the queue is empty we stop the progressbar
+queue.on(`drain`, () => {
+  if (bar) {
+    bar.done()
+  }
+  totalJobs = 0
+})
+
 /**
  * @callback {Queue~queueCallback}
  * @param {*} error
@@ -271,9 +275,6 @@ const pushTask = task =>
       })
   })
 
-// Keep track of the total number of jobs we push in the queue
-let totalJobs = 0
-
 /***************
  * Entry Point *
  ***************/
@@ -329,6 +330,11 @@ module.exports = ({
     return Promise.reject(`wrong url: ${url}`)
   }
 
+  if (totalJobs === 0) {
+    bar = createProgress(`Downloading remote files`)
+    bar.start()
+  }
+
   totalJobs += 1
   bar.total = totalJobs
 
diff --git a/packages/gatsby-source-filesystem/src/utils.js b/packages/gatsby-source-filesystem/src/utils.js
index 24e03f31e525d..2d68cd317faf3 100644
--- a/packages/gatsby-source-filesystem/src/utils.js
+++ b/packages/gatsby-source-filesystem/src/utils.js
@@ -1,5 +1,7 @@
 const path = require(`path`)
 const Url = require(`url`)
+const ProgressBar = require(`progress`)
+const reporter = require(`gatsby-cli/lib/reporter`)
 
 /**
  * getParsedPath
@@ -40,6 +42,33 @@ export function getRemoteFileName(url) {
   return getParsedPath(url).name
 }
 
+// TODO remove in V3
+export function createProgress(message) {
+  if (reporter.createProgress) {
+    return reporter.createProgress(message)
+  }
+
+  const bar = new ProgressBar(
+    ` [:bar] :current/:total :elapsed s :percent ${message}`,
+    {
+      total: 0,
+      width: 30,
+      clear: true,
+    }
+  )
+
+  return {
+    start() {},
+    tick() {
+      bar.tick()
+    },
+    done() {},
+    set total(value) {
+      bar.total = value
+    },
+  }
+}
+
 /**
  * slash
  * --
diff --git a/yarn.lock b/yarn.lock
index 4f0d7ddecf269..a2e93a5ba0155 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17472,16 +17472,16 @@ process@~0.5.1:
   resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
   integrity sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=
 
-progress@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
-  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
-
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
   integrity sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=
 
+progress@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"