fix hydration issue by preventing template creation during SSR (#1294)

* fix hydration issue by preventing template creation during SSR

* fix lint

* revert galleryUiComponents change

packages/gallery/src/components/item/media/GalleryUI.tsx

@@ -1,25 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useGalleryUI } from '../../../context/GalleryContext';
+
+type ComponentType = React.ComponentType<{ size: number }>;
+
+interface GalleryComponents {
+  videoPlayButton: ComponentType;
+  rotateArrow: ComponentType;
+}
+
 const galleryUiComponents = {
   videoPlayButton: React.lazy(() => import(/* webpackChunkName: "defaultPlayButton" */ './playButton')),
   rotateArrow: React.lazy(() => import(/* webpackChunkName: "defaultRotateArrow" */ './rotateArrow')),
 };
+
 interface GalleryUIProps {
   size: number;
-  type: 'videoPlayButton' | 'rotateArrow';
+  type: keyof GalleryComponents;
 }
 
 export const GalleryUI = ({ type, size }: GalleryUIProps): JSX.Element => {
-  let Component;
-
+  const [isMounted, setIsMounted] = useState(false);
   const galleryUI = useGalleryUI();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return <></>;
+  }
+
   if (typeof galleryUI?.[type] === 'function') {
     return galleryUI[type](size);
-  } else if (galleryUiComponents[type]) {
-    Component = galleryUiComponents[type];
-  } else {
+  }
+
+  const Component = galleryUiComponents[type];
+
+  if (!Component) {
     return <></>;
   }
+
   return (
     <React.Suspense fallback={<></>}>
       <Component size={size} />