[docs] Extract nprogress from documentation page into a hook (expo#16056)

Author: byCedric

docs/common/use-nprogress.ts

@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router';
+import nprogress from 'nprogress';
+import { useEffect } from 'react';
+
+/**
+ * Set up nprogress using NextJS Router events.
+ * This hook listens to these three events:
+ *   - routeChangeStart → start
+ *   - routeChangeComplete → done
+ *   - routeChangeError → done
+ */
+export function useNProgress() {
+  const router = useRouter();
+
+  useEffect(function didMount() {
+    router.events.on('routeChangeStart', nprogress.start);
+    router.events.on('routeChangeComplete', nprogress.done);
+    router.events.on('routeChangeError', nprogress.done);
+
+    return function didUnmount() {
+      router.events.off('routeChangeStart', nprogress.start);
+      router.events.off('routeChangeComplete', nprogress.done);
+      router.events.off('routeChangeError', nprogress.done);
+    };
+  }, []);
+}

docs/components/DocumentationPage.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { theme } from '@expo/styleguide';
 import some from 'lodash/some';
 import Router, { NextRouter } from 'next/router';
-import NProgress from 'nprogress';
 import * as React from 'react';
 
 import * as Utilities from '~/common/utilities';
@@ -80,17 +79,7 @@ export default class DocumentationPage extends React.Component<Props, State> {
       if (this.layoutRef.current) {
         window.__sidebarScroll = this.layoutRef.current.getSidebarScrollTop();
       }
-      NProgress.start();
     });
-
-    Router.events.on('routeChangeComplete', () => {
-      NProgress.done();
-    });
-
-    Router.events.on('routeChangeError', () => {
-      NProgress.done();
-    });
-
     window.addEventListener('resize', this.handleResize);
   }
 

docs/pages/_app.tsx

@@ -9,6 +9,7 @@ import React, { useState, useEffect } from 'react';
 import { TrackPageView } from '~/common/analytics';
 import { preprocessSentryError } from '~/common/sentry-utilities';
 import * as markdown from '~/common/translate-markdown';
+import { useNProgress } from '~/common/use-nprogress';
 import DocumentationElements from '~/components/page-higher-order/DocumentationElements';
 
 import 'react-diff-view/style/index.css';
@@ -52,6 +53,7 @@ export function reportWebVitals({ id, name, label, value }: NextWebVitalsMetric)
 function App({ Component, pageProps }: AppProps) {
   const googleAnalyticsId = 'UA-107832480-3';
   const [shouldLoadAnalytics, setShouldLoadAnalytics] = useState(false);
+  useNProgress();
 
   useEffect(() => {
     setShouldLoadAnalytics(true);