From 2b94d3a5fbb6361fce8c2018725b448e54088a63 Mon Sep 17 00:00:00 2001
From: SyLi_4aaf <shaoyan.li@uzh.ch>
Date: Fri, 5 May 2023 16:59:55 +0200
Subject: [PATCH 1/3] fix "Invalid data cell" issue

---
 src/Molstar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Molstar.jsx b/src/Molstar.jsx
index cb7c137..a87a098 100644
--- a/src/Molstar.jsx
+++ b/src/Molstar.jsx
@@ -45,7 +45,7 @@ const Molstar = props => {
 
 
   useEffect(() => {
-    loadStructure(pdbId, url, file, plugin.current);
+    async() => await(loadStructure(pdbId, url, file, plugin.current));
   }, [pdbId, url, file])
 
 

From f2c31857ddb7f58a9ec4ae39ee5859771dc41f54 Mon Sep 17 00:00:00 2001
From: SyLi9527 <79486258+SyLi9527@users.noreply.github.com>
Date: Sun, 7 May 2023 18:56:36 +0200
Subject: [PATCH 2/3] fix typo

---
 src/Molstar.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Molstar.jsx b/src/Molstar.jsx
index a87a098..c1875a6 100644
--- a/src/Molstar.jsx
+++ b/src/Molstar.jsx
@@ -45,7 +45,9 @@ const Molstar = props => {
 
 
   useEffect(() => {
-    async() => await(loadStructure(pdbId, url, file, plugin.current));
+    (async() => {
+      await loadStructure(pdbId, url, file, plugin.current);
+    })();
   }, [pdbId, url, file])
 
 

From e3f51e54235df6f3ba9b6b606d5097ff954e4107 Mon Sep 17 00:00:00 2001
From: SyLi9527 <79486258+SyLi9527@users.noreply.github.com>
Date: Sun, 7 May 2023 21:18:12 +0200
Subject: [PATCH 3/3] fix: avoid requesting the same resource at first
 rendering

---
 src/Molstar.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Molstar.jsx b/src/Molstar.jsx
index c1875a6..740b158 100644
--- a/src/Molstar.jsx
+++ b/src/Molstar.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
 import { DefaultPluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
@@ -14,7 +14,7 @@ const Molstar = props => {
   const parentRef = useRef(null);
   const canvasRef = useRef(null);
   const plugin = useRef(null);
-
+  const [initialized, setInitialized] = useState(false);
   
   useEffect(() => {
     (async () => {
@@ -39,12 +39,14 @@ const Molstar = props => {
         } } } });
       }
       await loadStructure(pdbId, url, file, plugin.current);
+      setInitialized(true);
     })();
     return () => plugin.current = null;
   }, [])
 
 
   useEffect(() => {
+    if (!initialized) return;
     (async() => {
       await loadStructure(pdbId, url, file, plugin.current);
     })();