From 321584cdebcdba520e1482bbbea41b9f91eeeebc Mon Sep 17 00:00:00 2001
From: James Gatz <jamesgatzos@gmail.com>
Date: Fri, 18 Nov 2022 13:44:02 +0100
Subject: [PATCH] use a single instance for swagger ui (#5440)

---
 .../insomnia/src/ui/components/swagger-ui.tsx | 54 +++++++++----------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/packages/insomnia/src/ui/components/swagger-ui.tsx b/packages/insomnia/src/ui/components/swagger-ui.tsx
index 4d3aa488c..258b869a4 100644
--- a/packages/insomnia/src/ui/components/swagger-ui.tsx
+++ b/packages/insomnia/src/ui/components/swagger-ui.tsx
@@ -1,46 +1,40 @@
 import 'swagger-ui-dist/swagger-ui.css';
 
 import React, { FC, useEffect, useRef } from 'react';
-import { SwaggerConfigs, SwaggerUIBundle as createSwaggerUI } from 'swagger-ui-dist';
+import { Spec, SwaggerConfigs, SwaggerUIBundle as createSwaggerUI } from 'swagger-ui-dist';
 
-export const SwaggerUI: FC<SwaggerConfigs> = props => {
-  const swaggerUIRef = useRef<SwaggerConfigs | null>(null);
-  const domNodeRef = useRef(null);
+// Keep an instance of swagger-ui because it doesn't have a teardown method
+let SwaggerUIInstance: SwaggerConfigs | null = null;
+
+export const SwaggerUI: FC<{
+  spec: Spec;
+  supportedSubmitMethods: string[];
+}> = ({
+  spec,
+  supportedSubmitMethods,
+}) => {
+  const domNodeRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    swaggerUIRef.current = createSwaggerUI({
-      ...props,
-      domNode: domNodeRef.current,
-    });
-  }, [props]);
-
-  useEffect(() => {
-    const swaggerUI = swaggerUIRef?.current;
+    const swaggerUI = SwaggerUIInstance;
 
     if (swaggerUI) {
-      const prevStateUrl = swaggerUIRef?.current?.specSelectors.url();
-      if (props.url !== prevStateUrl) {
-        // flush current content
-        swaggerUI.specActions.updateSpec('');
-
-        if (props.url) {
-          // update the internal URL
-          swaggerUI.specActions.updateUrl(props.url);
-          // trigger remote definition fetch
-          swaggerUI.system.specActions.download(props.url);
-        }
-      }
-
       const prevStateSpec = swaggerUI.specSelectors.specStr();
-      if (props.spec && (props.spec !== prevStateSpec)) {
-        if (typeof props.spec === 'object') {
-          swaggerUI.specActions.updateSpec(JSON.stringify(props.spec));
+      if (spec && (spec !== prevStateSpec)) {
+        if (typeof spec === 'object') {
+          swaggerUI.specActions.updateSpec(JSON.stringify(spec));
         } else {
-          swaggerUI.specActions.updateSpec(props.spec);
+          swaggerUI.specActions.updateSpec(spec);
         }
       }
+    } else {
+      SwaggerUIInstance = createSwaggerUI({
+        domNode: domNodeRef.current,
+        spec,
+        supportedSubmitMethods,
+      });
     }
-  }, [props.spec, props.url]);
+  }, [supportedSubmitMethods, spec]);
 
   return <div ref={domNodeRef} />;
 };