feat(gatsby-recipes): While apply a step, show the time elapsed after…

… 10 seconds (gatsbyjs#23362)

* feat(gatsby-recipes): use theme-ui preset as default index.js

* feat(gatsby-recipes): show elapsed timer when apply steps after 10 seconds

packages/gatsby-recipes/recipes/theme-ui.mdx

@@ -10,6 +10,7 @@ Install packages.
 
 <NPMPackage name="theme-ui" />
 <NPMPackage name="gatsby-plugin-theme-ui" />
+<NPMPackage name="@theme-ui/presets" />
 
 ---
 
@@ -21,9 +22,9 @@ Add the plugin `gatsby-plugin-theme-ui` to your `gatsby-config.js`.
 
 Write out Theme UI configuration files.
 
-<GatsbyShadowFile
-  theme="gatsby-plugin-theme-ui"
-  path="src/index.js"
+<File
+  path="src/gatsby-plugin-theme-ui/index.js"
+  content="https://gist.github.com/KyleAMathews/ab59e200e4f8a1b4109dddb51b2140f9/raw/209a2e7c589766869522b12f7f6cecaf3f7a6f81/index.js"
 />
 
 <File
@@ -41,4 +42,5 @@ You're ready to get started!
 - Learn about the theme specification: https://system-ui.com
 
 *note:* if you're running this recipe on the default starter (or any other starter with
-base css), you'll need to remove the require to `layout.css` in the `components/layout.js` file.
+base css), you'll need to remove the require to `layout.css` in the `components/layout.js` file
+as otherwise they'll override some theme-ui styles.

packages/gatsby-recipes/src/cli.js

@@ -445,6 +445,10 @@ module.exports = ({ recipe, graphqlPort, projectRoot }) => {
                 <Text>
                   {` `}
                   <Spinner /> {p.describe}
+                  {` `}
+                  {state.context.elapsed > 0 && (
+                    <Text>({state.context.elapsed / 1000}s elapsed)</Text>
+                  )}
                 </Text>
               </Div>
             ))}

packages/gatsby-recipes/src/recipe-machine.js

@@ -136,12 +136,35 @@ const recipeMachine = Machine(
       applyingPlan: {
         invoke: {
           id: `applyPlan`,
-          src: async (context, event) => {
+          src: (context, event) => cb => {
+            cb(`RESET`)
             if (context.plan.length == 0) {
-              return undefined
+              return cb(`onDone`)
             }
 
-            return await applyPlan(context.plan)
+            const interval = setInterval(() => {
+              cb(`TICK`)
+            }, 10000)
+
+            applyPlan(context.plan)
+              .then(result => {
+                cb({ type: `onDone`, data: result })
+              })
+              .catch(error => cb({ type: `onError`, data: error }))
+
+            return () => clearInterval(interval)
+          },
+        },
+        on: {
+          RESET: {
+            actions: assign({
+              elapsed: 0,
+            }),
+          },
+          TICK: {
+            actions: assign({
+              elapsed: context => (context.elapsed += 10000),
+            }),
           },
           onDone: {
             target: `hasAnotherStep`,