try to mount extension immediately

retry every 500ms on fail, up to 10 times
brumm · Jul 25, 2021 · bde8ae4 · bde8ae4
1 parent e978d86
commit bde8ae4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 36 deletions.
diff --git a/src/components/Node.js b/src/components/Node.js
@@ -42,28 +42,29 @@ const maybeHijackClick = event => {
 
 const Node = ({ type, name, path, parentCommitmessage, level }) => {
   const { user, repo, branch } = useStore(state => state.repoDetails)
+  const isExpanded = useStore(state => state.expandedNodes[path] === true)
+  const toggleExpandNode = useStore(state => state.toggleExpandNode)
+  const selectedFilePath = useStore(state => state.selectedFilePath)
+  const setSelectedFilePath = useStore(state => state.setSelectedFilePath)
+  const hasNoSelectedFilePath = selectedFilePath === null
+
+  const isSelected = path === selectedFilePath
+  const isFolder = type === 'dir'
+
   const childListingObserver = React.useMemo(
     () =>
       new QueryObserver(queryClient, {
         queryKey: ['listing', { user, repo, branch, path }],
       }),
     [branch, path, repo, user]
   )
+
   const isLoadingContents = useObserver(
     childListingObserver,
     ({ isLoading }) => isLoading
   )
 
-  // const isLoadingContents = false
-
-  const isExpanded = useStore(state => state.expandedNodes[path] === true)
-  const toggleExpandNode = useStore(state => state.toggleExpandNode)
-  const selectedFilePath = useStore(state => state.selectedFilePath)
-  const setSelectedFilePath = useStore(state => state.setSelectedFilePath)
-  const hasNoSelectedFilePath = selectedFilePath === null
-
-  const isSelected = path === selectedFilePath
-  const isFolder = type === 'dir'
+  console.log({ isLoadingContents })
 
   let typeIcon = isFolder ? (
     <FolderIcon

diff --git a/src/entry-content-script.js b/src/entry-content-script.js
@@ -9,36 +9,45 @@ import Root from '@/components/Root'
 import GlobalErrorBoundary from '@/components/GlobalErrorBoundary'
 import InvalidTokenErrorBoundary from '@/components/InvalidTokenErrorBoundary'
 
-const mountExtension = () =>
-  setTimeout(() => {
-    const mount = document.querySelector(APP_MOUNT_SELECTOR)
-    if (!mount) {
+let retries = 0
+
+const mountExtension = () => {
+  console.log({ retries })
+
+  const mount = document.querySelector(APP_MOUNT_SELECTOR)
+  if (!mount) {
+    if (retries < 10) {
+      retries += 1
+      setTimeout(mountExtension, 500)
       return
     }
 
-    const previousAppContainer = document.querySelector(APP_CONTAINER_SELECTOR)
-    if (previousAppContainer) {
-      previousAppContainer.remove()
-    }
+    return
+  }
+
+  const previousAppContainer = document.querySelector(APP_CONTAINER_SELECTOR)
+  if (previousAppContainer) {
+    previousAppContainer.remove()
+  }
 
-    chrome.storage.sync.get('token', ({ token = null }) => {
-      setState(state => {
-        state.token = token
-        state.repoDetails = getRepoDetails()
-        state.initialTableHeight = mount.offsetHeight
-      })
-
-      render(
-        <GlobalErrorBoundary>
-          <InvalidTokenErrorBoundary>
-            <Root />
-          </InvalidTokenErrorBoundary>
-        </GlobalErrorBoundary>,
-        mount
-      )
+  chrome.storage.sync.get('token', ({ token = null }) => {
+    setState(state => {
+      state.token = token
+      state.repoDetails = getRepoDetails()
+      state.initialTableHeight = mount.offsetHeight
     })
-  }, 500)
 
-document.addEventListener('pjax:end', mountExtension)
+    render(
+      <GlobalErrorBoundary>
+        <InvalidTokenErrorBoundary>
+          <Root />
+        </InvalidTokenErrorBoundary>
+      </GlobalErrorBoundary>,
+      mount
+    )
+  })
+}
 
 mountExtension()
+
+document.addEventListener('pjax:end', mountExtension)
diff --git a/src/hooks.js b/src/hooks.js
@@ -37,7 +37,6 @@ export const useObserver = (observer, selectorFn, dependencies = []) => {
   )
 
   React.useEffect(() => {
-    console.log('useobserver useeffect')
     set(memoizedSelectorFn(observer.currentResult))
 
     return observer.subscribe(query => {