feat(client): prefetch next challenge (#55472)

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/templates/Challenges/classic/show.tsx

@@ -11,6 +11,7 @@ import store from 'store';
 import { editor } from 'monaco-editor';
 import type { FitAddon } from 'xterm-addon-fit';
 
+import { useFeature } from '@growthbook/growthbook-react';
 import { challengeTypes } from '../../../../../shared/config/challenge-types';
 import LearnLayout from '../../../components/layouts/learn';
 import { MAX_MOBILE_WIDTH } from '../../../../config/misc';
@@ -58,6 +59,8 @@ import {
 } from '../redux/selectors';
 import { savedChallengesSelector } from '../../../redux/selectors';
 import { getGuideUrl } from '../utils';
+import { preloadPage } from '../../../../utils/gatsby/page-loading';
+import envData from '../../../../config/env.json';
 import { XtermTerminal } from './xterm';
 import MultifileEditor from './multifile-editor';
 import DesktopLayout from './desktop-layout';
@@ -303,6 +306,14 @@ function ShowClassic({
     setUsingKeyboardInTablist(usingKeyboardInTablist);
   };
 
+  // AB testing Pre-fetch in the Spanish locale
+  const isPreFetchEnabled = useFeature('prefetch_ab_test').on;
+  useEffect(() => {
+    if (isPreFetchEnabled && envData.clientLocale === 'espanol') {
+      preloadPage(nextChallengePath);
+    }
+  }, [nextChallengePath, isPreFetchEnabled]);
+
   useEffect(() => {
     initializeComponent(title);
     // Bug fix for the monaco content widget and touch devices/right mouse

client/utils/declarations.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    // This is a feature Gatsby adds to the `window` object.
+    // https://github.com/gatsbyjs/gatsby/blob/deb41cdfefbefe0c170b5dd7c10a19ba2b338f6e/packages/gatsby/cache-dir/production-app.js#L28
+    ___loader: {
+      hovering: (path: string | null) => void;
+    };
+  }
+}
+
+export {};

client/utils/gatsby/page-loading.ts

@@ -0,0 +1,10 @@
+/**
+ * The function is useful in cases where we want to preload a page
+ * but the link of the page isn't rendered on the screen.
+ * For more details, see https://github.com/freeCodeCamp/freeCodeCamp/pull/55472.
+ */
+export const preloadPage = (path: string | null) => {
+  if (!window.___loader || !path) return;
+
+  window.___loader.hovering(path);
+};