Merge pull request #5894 from qburst/enhancement/docs-site-ts

Fix loading indicator flicker when switching TypeScript/JavaScript tabs in docs-site

Author: martijnrusschen

docs-site/src/components/Example/index.tsx

@@ -62,35 +62,36 @@ export default class CodeExampleComponent extends React.Component<
     registerLocale("en-GB", enGB);
   }
 
-  transpileTsCode = async () => {
-    const tsCode = this.state.tsxCode;
+  applyStateUpdates = (stateUpdates: Partial<TState>) => {
+    this.setState((state) => ({
+      ...state,
+      ...stateUpdates,
+    }));
+  };
 
-    let stateUpdates = {
+  transpileTsCode = async () => {
+    this.applyStateUpdates({
       jsxCode: "",
       isTranspiling: true,
-    };
+    });
 
     try {
+      const tsCode = this.state.tsxCode;
       const transpiledCode = await transformTsx(tsCode);
 
       this.lastTranspiledTsCodeRef.current = tsCode;
-      stateUpdates = {
+      this.applyStateUpdates({
         jsxCode: transpiledCode,
         isTranspiling: false,
-      };
+      });
     } catch (err) {
-      stateUpdates = {
+      this.applyStateUpdates({
         jsxCode: "// Transpilation failed! Error: " + (err as Error).message,
         isTranspiling: false,
-      };
+      });
 
       toast.show("Transpilation failed!", "error");
     }
-
-    this.setState((state) => ({
-      ...state,
-      ...stateUpdates,
-    }));
   };
 
   handleCodeChange = debounce((code: string) => {