added nextjs flow preloading

src/containers/flow/FlowStamp/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, FormEvent, useCallback, useMemo } from 'react';
 
-
 import classNames from 'classnames';
 
 import { Superpower } from '~/components/boris/Superpower';
@@ -12,7 +11,7 @@ import { InputText } from '~/components/input/InputText';
 import { Toggle } from '~/components/input/Toggle';
 import { experimentalFeatures } from '~/constants/features';
 import styles from '~/containers/flow/FlowStamp/styles.module.scss';
-import { useFlowContext } from '~/utils/context/FlowContextProvider';
+import { useFlowContext } from '~/utils/providers/FlowProvider';
 import { useSearchContext } from '~/utils/providers/SearchProvider';
 
 interface IProps {

src/hooks/flow/useFlow.ts

@@ -5,6 +5,7 @@ import { useFlowLoader } from '~/hooks/flow/useFlowLoader';
 import { useFlowSetCellView } from '~/hooks/flow/useFlowSetCellView';
 import { useGetLabStats } from '~/hooks/lab/useGetLabStats';
 import { useFlowStore } from '~/store/flow/useFlowStore';
+import { GetNodeDiffResult } from '~/types/node';
 
 export const useFlow = () => {
   const { loadMore, isSyncing } = useFlowLoader();

src/layouts/FlowLayout/index.tsx

@@ -8,16 +8,13 @@ import { FlowStamp } from '~/containers/flow/FlowStamp';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { useUser } from '~/hooks/auth/useUser';
 import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';
-import { useFlowContext } from '~/utils/context/FlowContextProvider';
+import { useFlowContext } from '~/utils/providers/FlowProvider';
 
 import styles from './styles.module.scss';
 
-interface Props {
+interface Props {}
-  isFluid: boolean;
-  onToggleLayout: () => void;
-}
 
-const FlowLayout: FC<Props> = ({ isFluid, onToggleLayout }) => {
+const FlowLayout: FC<Props> = () => {
   const { heroes, nodes, onChangeCellView, loadMore, isSyncing } = useFlowContext();
   const { user } = useUser();
 
@@ -31,7 +28,7 @@ const FlowLayout: FC<Props> = ({ isFluid, onToggleLayout }) => {
         </div>
 
         <div className={styles.stamp}>
-          <FlowStamp isFluid={isFluid} onToggleLayout={onToggleLayout} />
+          <FlowStamp isFluid={false} onToggleLayout={console.warn} />
         </div>
 
         <FlowGrid nodes={nodes} user={user} onChangeCellView={onChangeCellView} />

src/pages/index.tsx

@@ -1,44 +1,43 @@
 import React, { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
+import { InferGetStaticPropsType } from 'next';
 
+import { getNodeDiff } from '~/api/node';
 import { PageTitle } from '~/components/common/PageTitle';
 import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
-import { useFlow } from '~/hooks/flow/useFlow';
 import { FlowLayout } from '~/layouts/FlowLayout';
-import { FlowContextProvider } from '~/utils/context/FlowContextProvider';
+import { FlowProvider } from '~/utils/providers/FlowProvider';
 import { getPageTitle } from '~/utils/ssr/getPageTitle';
 
-interface Props {}
+export const getStaticProps = async () => {
+  const fallbackData = await getNodeDiff({
+    start: new Date().toISOString(),
+    end: new Date().toISOString(),
+    with_heroes: true,
+    with_updated: true,
+    with_recent: false,
+    with_valid: false,
+  });
 
-const FlowPage: FC<Props> = observer(() => {
+  return {
+    props: {
+      fallbackData,
+    },
+    revalidate: 5 * 60,
+  };
+};
+
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+
+const FlowPage: FC<Props> = observer(({ fallbackData }) => {
   useGlobalLoader();
 
-  const {
-    updates,
-    nodes,
-    heroes,
-    recent,
-    isFluid,
-    toggleLayout,
-    onChangeCellView,
-    loadMore,
-    isSyncing,
-  } = useFlow();
-
   return (
-    <FlowContextProvider
+    <FlowProvider fallbackData={fallbackData}>
-      updates={updates}
-      recent={recent}
-      heroes={heroes}
-      nodes={nodes}
-      loadMore={loadMore}
-      isSyncing={isSyncing}
-      onChangeCellView={onChangeCellView}
-    >
       <PageTitle title={getPageTitle('Флоу')} />
-      <FlowLayout isFluid={isFluid} onToggleLayout={toggleLayout} />
+      <FlowLayout />
-    </FlowContextProvider>
+    </FlowProvider>
   );
 });
 

src/utils/context/FlowContextProvider.tsx

@@ -1,30 +0,0 @@
-import React, { createContext, FC, useContext } from 'react';
-
-import { FlowDisplay, IFlowNode, INode } from '~/types';
-
-export interface FlowContextProps {
-  updates: IFlowNode[];
-  recent: IFlowNode[];
-  heroes: IFlowNode[];
-  nodes: IFlowNode[];
-  isSyncing: boolean;
-  loadMore: () => Promise<unknown>;
-  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
-}
-
-export const FlowContext = createContext<FlowContextProps>({
-  updates: [],
-  recent: [],
-  heroes: [],
-  nodes: [],
-  isSyncing: false,
-  loadMore: async () => {},
-
-  onChangeCellView: () => {},
-});
-
-export const FlowContextProvider: FC<FlowContextProps> = ({ children, ...contextValue }) => {
-  return <FlowContext.Provider value={contextValue}>{children}</FlowContext.Provider>;
-};
-
-export const useFlowContext = () => useContext(FlowContext);

src/utils/providers/FlowProvider.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, FC, useContext, useMemo } from 'react';
+
+import { observer } from 'mobx-react-lite';
+import { uniq } from 'ramda';
+
+import { useFlow } from '~/hooks/flow/useFlow';
+import { FlowDisplay, IFlowNode, INode } from '~/types';
+import { GetNodeDiffResult } from '~/types/node';
+
+export interface FlowProviderProps {
+  fallbackData?: GetNodeDiffResult;
+}
+
+export interface FlowContextProps {
+  updates: IFlowNode[];
+  recent: IFlowNode[];
+  heroes: IFlowNode[];
+  nodes: IFlowNode[];
+  isSyncing: boolean;
+  loadMore: () => Promise<unknown>;
+  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
+}
+
+export const FlowContext = createContext<FlowContextProps>({
+  updates: [],
+  recent: [],
+  heroes: [],
+  nodes: [],
+  isSyncing: false,
+  loadMore: async () => {},
+
+  onChangeCellView: () => {},
+});
+
+export const FlowProvider: FC<FlowProviderProps> = observer(({ fallbackData, children }) => {
+  const flow = useFlow();
+
+  const value = useMemo<FlowContextProps>(() => {
+    if (!flow.nodes?.length && fallbackData) {
+      return {
+        ...flow,
+        heroes: fallbackData.heroes || [],
+        updates: fallbackData.updated || [],
+        recent: fallbackData.recent || [],
+        nodes: uniq([...(fallbackData.before || []), ...(fallbackData.after || [])]),
+      };
+    }
+
+    return {
+      ...flow,
+      heroes: fallbackData?.heroes?.length ? fallbackData.heroes : flow.heroes,
+    };
+  }, [flow, fallbackData]);
+
+  return <FlowContext.Provider value={value}>{children}</FlowContext.Provider>;
+});
+
+export const useFlowContext = () => useContext(FlowContext);