fix import of variables speed

.changeset/wet-ways-hear.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Optimized the speed of importing variables. Importing should now feel drastically faster

packages/tokens-studio-for-figma/src/app/components/ImportedTokensDialog.test.tsx

@@ -376,7 +376,7 @@ describe('ImportedTokensDialog', () => {
             },
           },
           {
-            $extensions: { 'studio.tokens': {} },
+            $extensions: { 'studio.tokens': { id: 'mock-uuid' } },
             name: 'opacity.50',
             type: 'opacity',
             value: '30%',
@@ -401,7 +401,7 @@ describe('ImportedTokensDialog', () => {
       expect(mockStore.getState().tokenState.tokens.global).toEqual(
         [
           {
-            $extensions: { 'studio.tokens': {} },
+            $extensions: { 'studio.tokens': { id: 'mock-uuid' } },
             name: 'light',
             type: 'typography',
             value: {
@@ -411,7 +411,7 @@ describe('ImportedTokensDialog', () => {
             },
           },
           {
-            $extensions: { 'studio.tokens': {} },
+            $extensions: { 'studio.tokens': { id: 'mock-uuid' } },
             name: 'opacity.50',
             type: 'opacity',
             value: '30%',

packages/tokens-studio-for-figma/src/app/components/ImportedTokensDialog.tsx

@@ -204,11 +204,11 @@ export default function ImportedTokensDialog() {
     setUpdatedTokens(importedTokens.updatedTokens);
   }, [importedTokens.newTokens, importedTokens.updatedTokens]);
 
-  const ListLength = 15;
+  const ListLength = 50;
 
   return (
     <Modal
-      title={t('imported', { ns: 'tokens' })}
+      title={t('importVariables', { ns: 'tokens' })}
       size="large"
       showClose
       isOpen={newTokens.length > 0 || updatedTokens.length > 0}

packages/tokens-studio-for-figma/src/app/store/models/tokenState.tsx

@@ -51,6 +51,7 @@ import {
 } from '@/storage/tokensStudio';
 import { deleteTokenSetFromTokensStudio } from '@/storage/tokensStudio/deleteTokenSetFromTokensStudio';
 import { updateAliasesInState } from '../utils/updateAliasesInState';
+import { CreateSingleTokenData, EditSingleTokenData } from '../useManageTokens';
 
 export interface TokenState {
   tokens: Record<string, AnyTokenList>;
@@ -246,6 +247,45 @@ export const tokenState = createModel<RootModel>()({
         },
       };
     },
+    createMultipleTokens: (state, data: CreateSingleTokenData[]) => {
+      // This is a deep clone of the tokens so that we force an update in the UI even if just the value changes
+      const newTokens: TokenStore['values'] = JSON.parse(JSON.stringify(state.tokens));
+      data.forEach((token) => {
+        if (!newTokens[token.parent]) {
+          newTokens[token.parent] = [];
+        }
+        const existingTokenIndex = newTokens[token.parent].findIndex((n) => n.name === token.name);
+        if (existingTokenIndex === -1) {
+          newTokens[token.parent].push(
+            updateTokenPayloadToSingleToken(token as UpdateTokenPayload, uuidv4()),
+          );
+        }
+      });
+
+      return {
+        ...state,
+        tokens: newTokens,
+      };
+    },
+    editMultipleTokens: (state, data: EditSingleTokenData[]) => {
+      // This is a deep clone of the tokens so that we force an update in the UI even if just the value changes
+      const newTokens: TokenStore['values'] = JSON.parse(JSON.stringify(state.tokens));
+      data.forEach((token) => {
+        const existingTokenIndex = newTokens[token.parent].findIndex((n) => n.name === token.name);
+        if (existingTokenIndex > -1) {
+          newTokens[token.parent] = [
+            ...newTokens[token.parent].slice(0, existingTokenIndex),
+            updateTokenPayloadToSingleToken(token as UpdateTokenPayload, uuidv4()),
+            ...newTokens[token.parent].slice(existingTokenIndex + 1),
+          ];
+        }
+      });
+
+      return {
+        ...state,
+        tokens: newTokens,
+      };
+    },
     duplicateToken: (state, data: DuplicateTokenPayload) => {
       const newTokens: TokenStore['values'] = {};
       Object.keys(state.tokens).forEach((tokenSet) => {

packages/tokens-studio-for-figma/src/app/store/useManageTokens.tsx

@@ -12,9 +12,11 @@ import {
 import useTokens from './useTokens';
 import { StyleOptions } from '@/constants/StyleOptions';
 import { ColorModifier } from '@/types/Modifier';
+import { wrapTransaction } from '@/profiling/transaction';
+
 // @TODO this typing could be more strict in the future
 
-type EditSingleTokenData = {
+export type EditSingleTokenData = {
   parent: string;
   type: TokenTypes;
   name: string;
@@ -32,7 +34,7 @@ type EditSingleTokenData = {
   }
 };
 
-type CreateSingleTokenData = {
+export type CreateSingleTokenData = {
   parent: string;
   type: TokenTypes;
   name: string;
@@ -232,27 +234,23 @@ export default function useManageTokens() {
   }, [renameTokenAcrossSets]);
 
   const importMultipleTokens = useCallback(async ({ multipleUpdatedTokens, multipleNewTokens }: { multipleUpdatedTokens?: EditSingleTokenData[], multipleNewTokens?: CreateSingleTokenData[] }) => {
-    dispatch.uiState.startJob({ name: BackgroundJobs.UI_RENAME_TOKEN_ACROSS_SETS, isInfinite: true });
+    wrapTransaction({ name: 'importVariables' }, () => {
+      dispatch.uiState.startJob({ name: BackgroundJobs.UI_RENAME_TOKEN_ACROSS_SETS, isInfinite: true });
 
-    const hasUpdatedTokens = multipleUpdatedTokens && multipleUpdatedTokens.length > 0;
-    const hasNewTokens = multipleNewTokens && multipleNewTokens.length > 0;
+      const hasUpdatedTokens = multipleUpdatedTokens && multipleUpdatedTokens.length > 0;
+      const hasNewTokens = multipleNewTokens && multipleNewTokens.length > 0;
 
-    if (hasUpdatedTokens) {
-      multipleUpdatedTokens.forEach((t) => {
-        editSingleToken(t);
-      });
-    }
+      if (hasUpdatedTokens) {
+        dispatch.tokenState.editMultipleTokens(multipleUpdatedTokens);
+      }
 
-    if (hasNewTokens) {
-      if (multipleNewTokens) {
-        multipleNewTokens.forEach((t) => {
-          createSingleToken(t);
-        });
+      if (hasNewTokens) {
+        dispatch.tokenState.createMultipleTokens(multipleNewTokens);
       }
-    }
 
-    dispatch.uiState.completeJob(BackgroundJobs.UI_RENAME_TOKEN_ACROSS_SETS);
-  }, [dispatch.uiState, createSingleToken, editSingleToken]);
+      dispatch.uiState.completeJob(BackgroundJobs.UI_RENAME_TOKEN_ACROSS_SETS);
+    });
+  }, [dispatch.uiState, dispatch.tokenState]);
 
   return useMemo(() => ({
     editSingleToken, createSingleToken, deleteSingleToken, deleteGroup, duplicateSingleToken, renameGroup, duplicateGroup, renameTokensAcrossSets, importMultipleTokens, deleteDuplicates,