Dialog performance - delay skeleton animation (codesandbox#3822)

* wait for dialog to come in before skeleton animates

* smoothen it up with at least delayed data fetching

Co-authored-by: Christian Alfoni <[email protected]>

Author: siddharthkp

packages/app/src/app/constants.ts

@@ -0,0 +1,3 @@
+export const DIALOG_TRANSITION_DURATION = 0.25;
+export const DIALOG_WIDTH = 420;
+export const REPLY_TRANSITION_DELAY = 0.5;

packages/app/src/app/overmind/effects/browser.ts

@@ -89,4 +89,27 @@ export default {
       localStorage.setItem(key, JSON.stringify(value));
     },
   },
+  /**
+   * Wait at least MS before resolving the value
+   */
+  waitAtLeast<T>(ms: number, cb: () => Promise<T>): Promise<T> {
+    return new Promise((resolve, reject) => {
+      let resolveValue: T;
+      setTimeout(() => {
+        if (!resolveValue) {
+          return;
+        }
+        resolve(resolveValue);
+      }, ms);
+      const startTime = Date.now();
+      cb()
+        .then(value => {
+          resolveValue = value;
+          if (Date.now() - startTime > ms) {
+            resolve(resolveValue);
+          }
+        })
+        .catch(reject);
+    });
+  },
 };

packages/app/src/app/overmind/namespaces/comments/actions.ts

@@ -1,4 +1,8 @@
 import { CommentsFilterOption } from '@codesandbox/common/lib/types';
+import {
+  DIALOG_TRANSITION_DURATION,
+  REPLY_TRANSITION_DELAY,
+} from 'app/constants';
 import {
   CodeReference,
   CommentAddedSubscription,
@@ -65,10 +69,14 @@ export const getComments: AsyncAction<string> = async (
       // No idea why TS complains about this
       // @ts-ignore
       sandbox: { comment },
-    } = await effects.gql.queries.comment({
-      sandboxId: sandbox.id,
-      commentId,
-    });
+    } = await effects.browser.waitAtLeast(
+      DIALOG_TRANSITION_DURATION + REPLY_TRANSITION_DELAY,
+      () =>
+        effects.gql.queries.comment({
+          sandboxId: sandbox.id,
+          commentId,
+        })
+    );
 
     comment.comments.forEach(childComment => {
       state.comments.comments[sandbox.id][childComment.id] = childComment;

packages/app/src/app/overmind/namespaces/comments/constants.ts

@@ -1,17 +1,20 @@
-import { Element, Menu, Stack, SkeletonText } from '@codesandbox/components';
+import { Element, Menu, SkeletonText, Stack } from '@codesandbox/components';
 import css from '@styled-system/css';
+import { DIALOG_TRANSITION_DURATION } from 'app/constants';
 import { CommentFragment } from 'app/graphql/types';
 import { useOvermind } from 'app/overmind';
 import React, { useState } from 'react';
 
-import { Markdown } from './Markdown';
 import { AvatarBlock } from '../components/AvatarBlock';
 import { EditComment } from '../components/EditComment';
+import { Markdown } from './Markdown';
 
 type ReplyProps = {
   reply: CommentFragment;
 };
 
+const animationDelay = DIALOG_TRANSITION_DURATION + 's';
+
 export const Reply = ({ reply }: ReplyProps) => {
   const { user, id, content } = reply;
   const { state, actions } = useOvermind();
@@ -84,18 +87,22 @@ export const Reply = ({ reply }: ReplyProps) => {
 export const SkeletonReply = props => (
   <Element marginX={4} paddingTop={6} {...props}>
     <Stack align="center" gap={2} marginBottom={4}>
-      <SkeletonText style={{ width: '32px', height: '32px' }} />
+      <SkeletonText style={{ width: '32px', height: '32px', animationDelay }} />
 
       <Stack direction="vertical" gap={1}>
-        <SkeletonText style={{ width: '120px', height: '14px' }} />
-        <SkeletonText style={{ width: '120px', height: '14px' }} />
+        <SkeletonText
+          style={{ width: '120px', height: '14px', animationDelay }}
+        />
+        <SkeletonText
+          style={{ width: '120px', height: '14px', animationDelay }}
+        />
       </Stack>
     </Stack>
 
     <Stack direction="vertical" gap={1} marginBottom={6}>
-      <SkeletonText style={{ width: '100%', height: '14px' }} />
-      <SkeletonText style={{ width: '100%', height: '14px' }} />
-      <SkeletonText style={{ width: '100%', height: '14px' }} />
+      <SkeletonText style={{ width: '100%', height: '14px', animationDelay }} />
+      <SkeletonText style={{ width: '100%', height: '14px', animationDelay }} />
+      <SkeletonText style={{ width: '100%', height: '14px', animationDelay }} />
     </Stack>
   </Element>
 );

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx

@@ -8,14 +8,19 @@ import {
   Text,
   Textarea,
 } from '@codesandbox/components';
-import { createGlobalStyle } from 'styled-components';
 import css from '@styled-system/css';
+import {
+  DIALOG_TRANSITION_DURATION,
+  DIALOG_WIDTH,
+  REPLY_TRANSITION_DELAY,
+} from 'app/constants';
 import { CommentFragment } from 'app/graphql/types';
 import { useOvermind } from 'app/overmind';
 import { OPTIMISTIC_COMMENT_ID } from 'app/overmind/namespaces/comments/state';
 import { motion, useAnimation } from 'framer-motion';
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+import { createGlobalStyle } from 'styled-components';
 
 import { AvatarBlock } from '../components/AvatarBlock';
 import { EditComment } from '../components/EditComment';
@@ -26,10 +31,6 @@ import { useScrollTop } from './use-scroll-top';
 export const CommentDialog = props =>
   ReactDOM.createPortal(<Dialog {...props} />, document.body);
 
-const DIALOG_WIDTH = 420;
-const DIALOG_TRANSITION_DURATION = 0.25;
-const REPLY_TRANSITION_DELAY = 0.5;
-
 export const Dialog: React.FC = () => {
   const { state } = useOvermind();
   const controller = useAnimation();