[docs] Use new Algolia app for new structure

docs/src/modules/components/AppFrame.js

@@ -74,10 +74,12 @@ export function DeferredAppSearch() {
     <React.Fragment>
       {/* Suspense isn't supported for SSR yet */}
       {mounted ? (
-        <React.Suspense fallback={null}>
+        <React.Suspense fallback={<Box sx={{ minWidth: { sm: 200 } }} />}>
           <AppSearch />
         </React.Suspense>
-      ) : null}
+      ) : (
+        <Box sx={{ minWidth: { sm: 200 } }} />
+      )}
     </React.Fragment>
   );
 }

docs/src/modules/components/AppNavDrawer.js

@@ -286,25 +286,6 @@ ProductIdentifier.propTypes = {
   versionSelector: PropTypes.element,
 };
 
-const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
-export function DeferredAppSearch() {
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return (
-    <React.Fragment>
-      {/* Suspense isn't supported for SSR yet */}
-      {mounted ? (
-        <React.Suspense fallback={null}>
-          <AppSearch />
-        </React.Suspense>
-      ) : null}
-    </React.Fragment>
-  );
-}
-
 function PersistScroll(props) {
   const { slot, children, enabled } = props;
   const rootRef = React.useRef();

docs/src/modules/components/AppSearch.js

@@ -18,7 +18,7 @@ import Link from 'docs/src/modules/components/Link';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
 import { useRouter } from 'next/router';
-import replaceUrl from 'docs/src/modules/utils/replaceUrl';
+import { isNewLocation } from 'docs/src/modules/utils/replaceUrl';
 
 const SearchButton = styled('button')(({ theme }) => {
   return {
@@ -192,6 +192,8 @@ export default function AppSearch() {
     setIsOpen(true);
   }, [setIsOpen]);
   const router = useRouter();
+  const isNewDocStructure = isNewLocation(router.asPath);
+
   const keyboardNavigator = {
     navigate({ item }) {
       const as = item.userLanguage !== 'en' ? `/${item.userLanguage}${item.as}` : item.as;
@@ -285,7 +287,12 @@ export default function AppSearch() {
         createPortal(
           <DocSearchModal
             initialQuery={initialQuery}
-            apiKey="1d8534f83b9b0cfea8f16498d19fbcab"
+            appId={isNewDocStructure ? 'TZGZ85B9TB' : 'BH4D9OD16A'}
+            apiKey={
+              isNewDocStructure
+                ? '8177dfb3e2be72b241ffb8c5abafa899'
+                : '1d8534f83b9b0cfea8f16498d19fbcab'
+            }
             indexName="material-ui"
             searchParameters={{
               facetFilters: ['version:master', facetFilterLanguage],
@@ -299,20 +306,16 @@ export default function AppSearch() {
                 parseUrl.href = item.url;
 
                 let hash = parseUrl.hash;
-                let pathname = parseUrl.pathname;
 
                 if (['lvl2', 'lvl3'].includes(item.type)) {
                   // remove '#heading-' from `href` url so that the link targets <span class="anchor-link"> inside <h2> or <h3>
                   // this will make the title appear under the Header
                   hash = hash.replace('#heading-', '#');
                 }
 
-                // TODO: remove this logic once the migration to new structure is done.
-                // This logic covers us during the ~60 minutes that it takes Algolia to run a crawl and update its index.
-                // It also allows us to have a search bar that works in dev mode while the new structure is not pushed to production.
-                pathname = replaceUrl(pathname, router.asPath);
-
-                const { canonicalAs, canonicalPathname } = pathnameToLanguage(`${pathname}${hash}`);
+                const { canonicalAs, canonicalPathname } = pathnameToLanguage(
+                  `${parseUrl.pathname}${hash}`,
+                );
 
                 return {
                   ...item,

docs/src/modules/utils/replaceUrl.ts

@@ -1,6 +1,6 @@
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 
-function isNewLocation(url: string) {
+export function isNewLocation(url: string) {
   url = url.replace(/^\/[a-z]{2}\//, '/');
   if (url === '/x' || url === '/x/') {
     // skipped if it is the X marketing page