From fec6919ff264662e04baf1fbd7797857ff8cdc46 Mon Sep 17 00:00:00 2001
From: Daniil Gaponov <dagaponov@yandex-team.ru>
Date: Thu, 8 Aug 2024 09:52:03 +0300
Subject: [PATCH] fix: showcase styles in themes page

---
 src/blocks/Examples/components/Showcase/Showcase.tsx |  4 +++-
 .../Themes/ui/ComponentPreview/ComponentPreview.tsx  | 12 +-----------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/blocks/Examples/components/Showcase/Showcase.tsx b/src/blocks/Examples/components/Showcase/Showcase.tsx
index 4cf7b0cc159..253adfee9e2 100644
--- a/src/blocks/Examples/components/Showcase/Showcase.tsx
+++ b/src/blocks/Examples/components/Showcase/Showcase.tsx
@@ -69,7 +69,9 @@ export const Showcase: React.FC<ShowcaseProps> = ({color, theme, style}) => {
     return (
         <ThemeProvider theme={theme} scoped rootClassName={`${b()} ${b({color, theme})}`}>
             {style ? (
-                <style>{`.gravity-ui-landing-examples-showcase_theme_${theme} {${style}}`}</style>
+                <style
+                    suppressHydrationWarning={true}
+                >{`.gravity-ui-landing-examples-showcase_theme_${theme} {${style}}`}</style>
             ) : null}
             <div className={b('row')}>
                 <div className={b('col')}>
diff --git a/src/components/Themes/ui/ComponentPreview/ComponentPreview.tsx b/src/components/Themes/ui/ComponentPreview/ComponentPreview.tsx
index 093427eda4a..bc34a622c86 100644
--- a/src/components/Themes/ui/ComponentPreview/ComponentPreview.tsx
+++ b/src/components/Themes/ui/ComponentPreview/ComponentPreview.tsx
@@ -1,22 +1,12 @@
 import {Flex} from 'landing-uikit';
 import {useTranslation} from 'next-i18next';
-import dynamic from 'next/dynamic';
 import React from 'react';
 
+import {Showcase} from '../../../../blocks/Examples/components/Showcase/Showcase';
 import {useThemeCreator} from '../../hooks';
 import {exportTheme} from '../../lib/themeCreatorExport';
 import {ThemeSection} from '../ThemeSection';
 
-const Showcase = dynamic(
-    () =>
-        import('../../../../blocks/Examples/components/Showcase/Showcase').then(
-            (res) => res.Showcase,
-        ),
-    {
-        ssr: false,
-    },
-);
-
 export const ComponentPreview = () => {
     const {t} = useTranslation('themes');
     const themeState = useThemeCreator();