fix(select/select-hint): fallback tooltip shows children

Using @kevin940726's workaround for vercel/next.js#7906

Author: nicholaschiang

components/select/select-hint.tsx

@@ -1,10 +1,16 @@
-import React from 'react';
+import { createContext, useContext } from 'react';
 import { TooltipProps } from '@rmwc/tooltip';
 import dynamic from 'next/dynamic';
 import useTranslation from 'next-translate/useTranslation';
 
-const Tooltip = dynamic<TooltipProps>(() =>
-  import('@rmwc/tooltip').then((m) => m.Tooltip)
+// Temporary workaround for not being able to access the `children` prop in the
+// fallback loading component (while the `Tooltip` is being dynamically loaded).
+// @see {@link https://github.com/vercel/next.js/issues/7906}
+const TooltipLoadingContext = createContext<JSX.Element>(<></>);
+
+const Tooltip = dynamic<TooltipProps>(
+  () => import('@rmwc/tooltip').then((m) => m.Tooltip),
+  { loading: () => useContext(TooltipLoadingContext) }
 );
 
 interface SelectHintProps {
@@ -18,8 +24,10 @@ export default function SelectHint({
 }: SelectHintProps): JSX.Element {
   const { t } = useTranslation();
   return (
-    <Tooltip content={t('common:shift-click')} align='topRight' open={open}>
-      {children}
-    </Tooltip>
+    <TooltipLoadingContext.Provider value={children}>
+      <Tooltip content={t('common:shift-click')} align='topRight' open={open}>
+        {children}
+      </Tooltip>
+    </TooltipLoadingContext.Provider>
   );
 }