improve click to context behavior and add ssrForceFetchDelay to apollo

components/comment.js

@@ -114,8 +114,8 @@ export default function Comment ({
     if (Number(router.query.commentId) === Number(item.id)) {
       // HACK wait for other comments to collapse if they're collapsed
       setTimeout(() => {
-        ref.current.scrollIntoView()
+        ref.current.scrollIntoView({ behavior: 'instant', block: 'start' })
-        ref.current.classList.add('flash-it')
+        ref.current.classList.add('outline-it')
         router.replace({
           pathname: router.pathname,
           query: { id: router.query.id }

lib/apollo.js

@@ -29,6 +29,7 @@ function getClient (uri) {
   return new ApolloClient({
     link: new HttpLink({ uri }),
     ssrMode: SSR,
+    ssrForceFetchDelay: 100,
     cache: new InMemoryCache({
       freezeResults: true,
       typePolicies: {

styles/globals.scss

@@ -626,6 +626,22 @@ div[contenteditable]:focus,
   animation: flash 2s linear 1;
 }
 
+@keyframes outline {
+  from {
+    box-shadow: inset 0 0 1px 1px var(--bs-info);
+  }
+  90% {
+    box-shadow: inset 0 0 1px 1px var(--bs-info);
+  }
+  to {
+    box-shadow: inset 0 0 0px 0px var(--bs-info);
+  }
+}
+
+.outline-it {
+  animation: outline 3s linear 1;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);