From 5a487c992af746eb0b497a908c0f490166d823f8 Mon Sep 17 00:00:00 2001
From: Eugene <eugene.shulga@dbbsoftware.com>
Date: Fri, 22 May 2026 15:33:45 +0300
Subject: [PATCH] feat: wrap dynamic token fetching in Suspense

---
 apps/csk-marketing-site/package.json          |  2 +-
 apps/csk-storybook/package.json               |  2 +-
 apps/csk/package.json                         |  2 +-
 apps/csk/src/app/uniform/[code]/page.tsx      |  8 +++--
 package-lock.json                             | 24 +++++++--------
 package.json                                  |  2 +-
 packages/csk-cli/package.json                 |  2 +-
 packages/csk-components/package.json          |  2 +-
 packages/csk-recipes/package.json             |  2 +-
 packages/design-extensions-tools/package.json |  2 +-
 .../design-extensions-provider.tsx            | 29 +++++++++++--------
 packages/eslint-config/package.json           |  2 +-
 packages/internal-scripts/package.json        |  2 +-
 packages/typescript-config/package.json       |  2 +-
 14 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/apps/csk-marketing-site/package.json b/apps/csk-marketing-site/package.json
index a68a2fc80..f55bf4b3c 100644
--- a/apps/csk-marketing-site/package.json
+++ b/apps/csk-marketing-site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-marketing-site",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",
diff --git a/apps/csk-storybook/package.json b/apps/csk-storybook/package.json
index 6c5ad311d..4c365da70 100644
--- a/apps/csk-storybook/package.json
+++ b/apps/csk-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-storybook",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "description": "CSK vNext Storybook is an interactive Storybook build showcasing components from the CSK vNext component starter kit. It provides detailed documentation, live previews, and testing capabilities for easy integration into your projects.",
   "main": "index.js",
   "scripts": {
diff --git a/apps/csk/package.json b/apps/csk/package.json
index 256538892..2b77e5413 100644
--- a/apps/csk/package.json
+++ b/apps/csk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/component-starter-kit",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",
diff --git a/apps/csk/src/app/uniform/[code]/page.tsx b/apps/csk/src/app/uniform/[code]/page.tsx
index 82122afb2..9bcc9fede 100644
--- a/apps/csk/src/app/uniform/[code]/page.tsx
+++ b/apps/csk/src/app/uniform/[code]/page.tsx
@@ -1,4 +1,3 @@
-import { CANVAS_EDITOR_STATE } from '@uniformdev/canvas';
 import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
 import { compositionCache } from '@uniformdev/csk-components/utils/getSlotComponents';
 import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
@@ -8,6 +7,7 @@ import {
   UniformPageParameters,
   createUniformStaticParams,
 } from '@uniformdev/next-app-router';
+import { deserializeEvaluationResult } from '@uniformdev/next-app-router-shared';
 import { componentResolver } from '@/components';
 import getAllStaticGeneratedPages from '@/utils/getAllStaticGeneratedPages';
 
@@ -21,9 +21,11 @@ export const generateStaticParams = async () => {
 export default async function UniformPage({ params }: UniformPageParameters) {
   'use cache';
   const { code } = await params;
-  const result = await resolveRouteFromCode({ code });
+
+  const result = deserializeEvaluationResult({ input: code });
+
   return (
-    <DesignExtensionsProvider isPreviewMode={result.pageState.compositionState === CANVAS_EDITOR_STATE}>
+    <DesignExtensionsProvider isPreviewMode={result.previewMode === 'editor'}>
       <UniformComposition
         code={code}
         resolveRoute={resolveRouteFromCode}
diff --git a/package-lock.json b/package-lock.json
index 7dd2c0129..09ed7586e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "csk-packages",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "csk-packages",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -27,7 +27,7 @@
     },
     "apps/csk": {
       "name": "@uniformdev/component-starter-kit",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "dependencies": {
         "@uniformdev/assets": "^20.63.0",
         "@uniformdev/canvas": "^20.63.0",
@@ -74,7 +74,7 @@
     },
     "apps/csk-marketing-site": {
       "name": "@uniformdev/csk-marketing-site",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "dependencies": {
         "@uniformdev/assets": "^20.63.0",
         "@uniformdev/canvas": "^20.63.0",
@@ -122,7 +122,7 @@
     },
     "apps/csk-storybook": {
       "name": "@uniformdev/csk-storybook",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "devDependencies": {
         "@chromatic-com/storybook": "^5.2.1",
         "@repo/eslint-config": "*",
@@ -23415,7 +23415,7 @@
     },
     "packages/csk-cli": {
       "name": "@uniformdev/csk-cli",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@inquirer/prompts": "^8.4.3",
@@ -23452,7 +23452,7 @@
     },
     "packages/csk-components": {
       "name": "@uniformdev/csk-components",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@inquirer/prompts": "^8.4.3",
@@ -23509,7 +23509,7 @@
     },
     "packages/csk-recipes": {
       "name": "@uniformdev/csk-recipes",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@inquirer/prompts": "^8.4.3",
@@ -23548,7 +23548,7 @@
     },
     "packages/design-extensions-tools": {
       "name": "@uniformdev/design-extensions-tools",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@inquirer/prompts": "^8.4.3",
@@ -23584,7 +23584,7 @@
     },
     "packages/eslint-config": {
       "name": "@repo/eslint-config",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "devDependencies": {
         "@eslint/js": "^9.31.0",
         "@next/eslint-plugin-next": "^16.2.6",
@@ -23605,12 +23605,12 @@
     },
     "packages/internal-scripts": {
       "name": "@repo/internal-scripts",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "license": "ISC"
     },
     "packages/typescript-config": {
       "name": "@repo/typescript-config",
-      "version": "6.1.82",
+      "version": "6.1.83",
       "license": "MIT"
     }
   }
diff --git a/package.json b/package.json
index 235b77682..6e39ef0cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "csk-packages",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "private": true,
   "scripts": {
     "build": "turbo build",
diff --git a/packages/csk-cli/package.json b/packages/csk-cli/package.json
index 1357e6385..39fefeac3 100644
--- a/packages/csk-cli/package.json
+++ b/packages/csk-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-cli",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "description": "Command-line interface (CLI) tool designed to streamline the development workflow within Uniform projects. It provides commands for pulling additional data and generating components based on Canvas data",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/csk-components/package.json b/packages/csk-components/package.json
index 69a9f7a6c..436e53052 100644
--- a/packages/csk-components/package.json
+++ b/packages/csk-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-components",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "description": "Components Starter Kit that provides a set of basic components for building websites within a Uniform project",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/csk-recipes/package.json b/packages/csk-recipes/package.json
index 611048e83..e6d3a66b6 100644
--- a/packages/csk-recipes/package.json
+++ b/packages/csk-recipes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-recipes",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "description": "command-line interface (CLI) and utility functions to help you work with recipes in a CSK project. It simplifies project initialization by allowing you to choose templates and include specific recipes",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/design-extensions-tools/package.json b/packages/design-extensions-tools/package.json
index 19c512cbd..21fd75175 100644
--- a/packages/design-extensions-tools/package.json
+++ b/packages/design-extensions-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-extensions-tools",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "description": "Command-line interface (CLI) tool and a set of utilities for working with design extension integrations",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/design-extensions-tools/src/components/providers/DesignExtensionsProvider/design-extensions-provider.tsx b/packages/design-extensions-tools/src/components/providers/DesignExtensionsProvider/design-extensions-provider.tsx
index 4b4cc20ff..a8d530899 100644
--- a/packages/design-extensions-tools/src/components/providers/DesignExtensionsProvider/design-extensions-provider.tsx
+++ b/packages/design-extensions-tools/src/components/providers/DesignExtensionsProvider/design-extensions-provider.tsx
@@ -1,25 +1,30 @@
 /* eslint-disable react-hooks/error-boundaries */
-import { FC } from 'react';
+import { FC, PropsWithChildren, Suspense } from 'react';
 import { DesignExtensionsProviderProps } from '.';
 import { getTokenConfiguration } from '../../../scripts/run-time';
 
-export const DesignExtensionsProvider: FC<DesignExtensionsProviderProps> = async ({
-  children,
-  isPreviewMode = false,
-}) => {
+const WithStylesWrapper: FC<PropsWithChildren> = async ({ children }) => {
+  const { colors, dimensions, defaultFont, borders } = (await getTokenConfiguration()) || {};
+  return (
+    <div className={defaultFont ? `font-${defaultFont}` : ''}>
+      {!!colors && <div dangerouslySetInnerHTML={{ __html: colors }} />}
+      {!!dimensions && <div dangerouslySetInnerHTML={{ __html: dimensions }} />}
+      {!!borders && <div dangerouslySetInnerHTML={{ __html: borders }} />}
+      {children}
+    </div>
+  );
+};
+
+export const DesignExtensionsProvider: FC<DesignExtensionsProviderProps> = ({ children, isPreviewMode = false }) => {
   try {
     if (!isPreviewMode && process.env.WATCH !== 'true') {
       return <div className="font-default">{children}</div>;
     }
 
-    const { colors, dimensions, defaultFont, borders } = (await getTokenConfiguration()) || {};
     return (
-      <div className={defaultFont ? `font-${defaultFont}` : ''}>
-        {!!colors && <div dangerouslySetInnerHTML={{ __html: colors }} />}
-        {!!dimensions && <div dangerouslySetInnerHTML={{ __html: dimensions }} />}
-        {!!borders && <div dangerouslySetInnerHTML={{ __html: borders }} />}
-        {children}
-      </div>
+      <Suspense fallback={<div className="font-default">{children}</div>}>
+        <WithStylesWrapper>{children}</WithStylesWrapper>
+      </Suspense>
     );
   } catch (e) {
     console.error(e);
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index e0ce27527..9d6012567 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/eslint-config",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "type": "module",
   "private": true,
   "exports": {
diff --git a/packages/internal-scripts/package.json b/packages/internal-scripts/package.json
index c2fc633bb..ed2cddc10 100644
--- a/packages/internal-scripts/package.json
+++ b/packages/internal-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/internal-scripts",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
index 9ae08bdf9..fdd5383b1 100644
--- a/packages/typescript-config/package.json
+++ b/packages/typescript-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/typescript-config",
-  "version": "6.1.82",
+  "version": "6.1.83",
   "private": true,
   "license": "MIT",
   "publishConfig": {