(nextjs) added node preloader

.drone.yml

@@ -19,7 +19,7 @@ steps:
       cache_key: '{{ .Repo.Name }}_{{ checksum "package.json" }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
       archive_format: "gzip"
       mount:
-        - '/app/node_modules'
+        - '/app'
     volumes:
       - name: cache
         path: /tmp/cache
@@ -85,7 +85,7 @@ steps:
       cache_key: '{{ .Repo.Name }}_{{ checksum "package.json" }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
       archive_format: "gzip"
       mount:
-        - '/app/node_modules'
+        - '/app'
     volumes:
       - name: cache
         path: /tmp/cache

src/components/media/ImagePreloader/index.tsx

@@ -21,7 +21,7 @@ const DEFAULT_WIDTH = 1920;
 const DEFAULT_HEIGHT = 1020;
 
 const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className }) => {
-  const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
+  const [maxHeight, setMaxHeight] = useState(0);
   const [loaded, setLoaded] = useState(false);
   const [hasError, setHasError] = useState(false);
 

src/hooks/dom/useResizeHandler.ts

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 export const useResizeHandler = (onResize: () => any) => {
   useEffect(() => {
     window.addEventListener('resize', onResize);
+    onResize();
     return () => window.removeEventListener('resize', onResize);
   }, [onResize]);
 };

src/hooks/flow/useFlowLoader.ts

@@ -81,7 +81,5 @@ export const useFlowLoader = () => {
     }
   }, [flow]);
 
-  console.log(toJS(flow.nodes));
-
   return { getInitialNodes, isSyncing, loadMore };
 };

src/hooks/node/useLoadNode.ts

@@ -1,5 +1,5 @@
 import useSWR from 'swr';
-import { ApiGetNodeResponse } from '~/types/node';
+import { ApiGetNodeRequest, ApiGetNodeResponse } from '~/types/node';
 import { API } from '~/constants/api';
 import { useOnNodeSeen } from '~/hooks/node/useOnNodeSeen';
 import { apiGetNode } from '~/api/node';
@@ -7,9 +7,11 @@ import { useCallback } from 'react';
 import { INode } from '~/types';
 import { EMPTY_NODE } from '~/constants/node';
 
-export const useLoadNode = (id: number) => {
-  const { data, isValidating, mutate } = useSWR<ApiGetNodeResponse>(API.NODE.GET_NODE(id), () =>
-    apiGetNode({ id })
+export const useLoadNode = (id: number, fallbackData?: ApiGetNodeResponse) => {
+  const { data, isValidating, mutate } = useSWR<ApiGetNodeResponse>(
+    API.NODE.GET_NODE(id),
+    () => apiGetNode({ id }),
+    { fallbackData, revalidateOnMount: true }
   );
 
   const update = useCallback(

src/pages/node/[id].tsx

@@ -13,12 +13,38 @@ import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider';
 import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { observer } from 'mobx-react-lite';
 import { useNodePageParams } from '~/hooks/node/useNodePageParams';
+import { GetServerSidePropsContext } from 'next';
+import { apiGetNode } from '~/api/node';
+import { ApiGetNodeResponse } from '~/types/node';
 
-type Props = RouteComponentProps<{ id: string }> & {};
+export async function getServerSideProps(
+  context: GetServerSidePropsContext<{ id: string }, ApiGetNodeResponse>
+) {
+  const id = parseInt(context.query.id as string, 10);
 
-const NodePage: FC<Props> = observer(() => {
+  if (!id) {
+    return { props: {} };
+  }
+
+  const fallbackData = await apiGetNode({ id });
+
+  return {
+    props: {
+      fallbackData: {
+        ...fallbackData,
+        last_seen: fallbackData.last_seen ?? null,
+      },
+    },
+  };
+}
+
+type Props = RouteComponentProps<{ id: string }> & {
+  fallbackData?: ApiGetNodeResponse;
+};
+
+const NodePage: FC<Props> = observer(props => {
   const id = useNodePageParams();
-  const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10));
+  const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10), props.fallbackData);
 
   const onShowImageModal = useImageModal();
   const {