(nextjs) fixed flow loading, anchors and styles

src/pages/_app.tsx

@@ -20,8 +20,6 @@ import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
 const mobxStore = getMOBXStore();
 
 export default function MyApp({ Component, pageProps }) {
-  useGlobalLoader();
-
   return (
     <StoreContextProvider store={mobxStore}>
       <SWRConfigProvider>

src/pages/index.tsx

@@ -3,10 +3,13 @@ import { FlowLayout } from '~/layouts/FlowLayout';
 import { useFlow } from '~/hooks/flow/useFlow';
 import { FlowContextProvider } from '~/utils/context/FlowContextProvider';
 import { observer } from 'mobx-react-lite';
+import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
 
 interface Props {}
 
 const FlowPage: FC<Props> = observer(() => {
+  useGlobalLoader();
+
   const {
     updates,
     nodes,

src/pages/node/[id].tsx

@@ -12,67 +12,63 @@ import { useNodePermissions } from '~/hooks/node/useNodePermissions';
 import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider';
 import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { observer } from 'mobx-react-lite';
+import { useNodePageParams } from '~/hooks/node/useNodePageParams';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
-const NodePage: FC<Props> = observer(
-  ({
-    match: {
-      params: { id },
-    },
-  }) => {
-    const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10));
+const NodePage: FC<Props> = observer(() => {
+  const id = useNodePageParams();
+  const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10));
 
-    const onShowImageModal = useImageModal();
-    const {
-      onLoadMoreComments,
-      onDelete: onDeleteComment,
-      onEdit: onSaveComment,
-      comments,
-      hasMore,
-      isLoading: isLoadingComments,
-    } = useNodeComments(parseInt(id, 10));
-    const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
-      parseInt(id, 10)
-    );
-    const [canEdit] = useNodePermissions(node);
+  const onShowImageModal = useImageModal();
+  const {
+    onLoadMoreComments,
+    onDelete: onDeleteComment,
+    onEdit: onSaveComment,
+    comments,
+    hasMore,
+    isLoading: isLoadingComments,
+  } = useNodeComments(parseInt(id, 10));
+  const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
+    parseInt(id, 10)
+  );
+  const [canEdit] = useNodePermissions(node);
 
-    useScrollToTop([id, isLoadingComments]);
+  useScrollToTop([id, isLoadingComments]);
 
-    if (!node) {
-      // TODO: do something here
-      return null;
-    }
-
-    return (
-      <NodeContextProvider node={node} isLoading={isLoading} update={update}>
-        <NodeRelatedProvider id={parseInt(id, 10)} tags={node.tags}>
-          <CommentContextProvider
-            onSaveComment={onSaveComment}
-            comments={comments}
-            hasMore={hasMore}
-            lastSeenCurrent={lastSeen}
-            isLoading={isLoadingComments}
-            onShowImageModal={onShowImageModal}
-            onLoadMoreComments={onLoadMoreComments}
-            onDeleteComment={onDeleteComment}
-          >
-            <TagsContextProvider
-              tags={node.tags}
-              canAppend={canEdit}
-              canDelete={canEdit}
-              isLoading={isLoading}
-              onChange={onTagsChange}
-              onTagClick={onTagClick}
-              onTagDelete={onTagDelete}
-            >
-              <NodeLayout />
-            </TagsContextProvider>
-          </CommentContextProvider>
-        </NodeRelatedProvider>
-      </NodeContextProvider>
-    );
+  if (!node) {
+    // TODO: do something here
+    return null;
   }
-);
+
+  return (
+    <NodeContextProvider node={node} isLoading={isLoading} update={update}>
+      <NodeRelatedProvider id={parseInt(id, 10)} tags={node.tags}>
+        <CommentContextProvider
+          onSaveComment={onSaveComment}
+          comments={comments}
+          hasMore={hasMore}
+          lastSeenCurrent={lastSeen}
+          isLoading={isLoadingComments}
+          onShowImageModal={onShowImageModal}
+          onLoadMoreComments={onLoadMoreComments}
+          onDeleteComment={onDeleteComment}
+        >
+          <TagsContextProvider
+            tags={node.tags}
+            canAppend={canEdit}
+            canDelete={canEdit}
+            isLoading={isLoading}
+            onChange={onTagsChange}
+            onTagClick={onTagClick}
+            onTagDelete={onTagDelete}
+          >
+            <NodeLayout />
+          </TagsContextProvider>
+        </CommentContextProvider>
+      </NodeRelatedProvider>
+    </NodeContextProvider>
+  );
+});
 
 export default NodePage;