Merge pull request #20 from opentargets/lf-subcell-fix

Fix subcellular location triggering re-rendering of target page
opentargets · Jul 4, 2022 · c9db43c · c9db43c
2 parents 12fed92 + fbdda1c
commit c9db43c
Showing 1 changed file with 24 additions and 19 deletions.
diff --git a/apps/platform/src/sections/target/SubcellularLocation/SubcellularViz.jsx b/apps/platform/src/sections/target/SubcellularLocation/SubcellularViz.jsx
@@ -1,4 +1,4 @@
-import React, { lazy, useEffect, useRef } from 'react';
+import React, { lazy, useEffect, useRef, Suspense } from 'react';
 import {
   Typography,
   List,
@@ -13,8 +13,11 @@ import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
 
 import Link from '../../../components/Link';
 import { identifiersOrgLink, getUniprotIds } from '../../../utils/global';
+import LoadingBackdrop from '../../../components/LoadingBackdrop';
 
-const SwissbioViz = lazy(() => import('./SwissbioViz'));
+const SwissbioViz = 'customElements' in window
+ ? lazy(() => import('./SwissbioViz')) 
+ : ({ children }) => <>{children}</>;
 
 const useStyles = makeStyles(theme => ({
   locationIcon: {
@@ -171,23 +174,25 @@ function SubcellularViz({ data: target }) {
             key={i}
             className={classes.tabPanel}
           >
-            <SwissbioViz
-              taxonId="9606"
-              locationIds={sourcesLocations[s.id]
-                .map(l => parseLocationTerm(l.termSL))
-                .join()}
-              sourceId={s.id.toLowerCase()}
-            >
-              <Box ml={4} key={s.id}>
-                <Typography variant="h6">{s.label}</Typography>
-                Location for{' '}
-                <LocationLink
-                  sourceId={s.id}
-                  id={s.id === 'uniprot' ? uniprotId : target.id}
-                />
-                <LocationsList sls={sourcesLocations[s.id]} />
-              </Box>
-            </SwissbioViz>
+            <Suspense fallback={<LoadingBackdrop />}>
+              <SwissbioViz
+                taxonId="9606"
+                locationIds={sourcesLocations[s.id]
+                  .map(l => parseLocationTerm(l.termSL))
+                  .join()}
+                sourceId={s.id.toLowerCase()}
+              >
+                <Box ml={4} key={s.id}>
+                  <Typography variant="h6">{s.label}</Typography>
+                  Location for{' '}
+                  <LocationLink
+                    sourceId={s.id}
+                    id={s.id === 'uniprot' ? uniprotId : target.id}
+                  />
+                  <LocationsList sls={sourcesLocations[s.id]} />
+                </Box>
+              </SwissbioViz>
+            </Suspense>
           </div>
         ))}
       </SubcellularVizTabs>