fix: flickering of tips card rendering while changing routes (#8065)

* feat: optimize tips component

* fix: use dynamic rendering

* fix: remove unnecessary memo

* fix: prefetch warning

* fix: use reverse list

packages/features/shell/Shell.tsx

@@ -1,5 +1,6 @@
 import type { User } from "@prisma/client";
 import { signOut, useSession } from "next-auth/react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
@@ -16,7 +17,6 @@ import { TeamsUpgradeBanner } from "@calcom/features/ee/teams/components";
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
-import { Tips } from "@calcom/features/tips";
 import AdminPasswordBanner from "@calcom/features/users/components/AdminPasswordBanner";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
@@ -69,6 +69,11 @@ import {
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
 import { TeamInviteBadge } from "./TeamInviteBadge";
 
+// need to import without ssr to prevent hydration errors
+const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
+  ssr: false,
+});
+
 /* TODO: Migate this */
 
 export const ONBOARDING_INTRODUCED_AT = dayjs("September 1 2021").toISOString();

packages/features/tips/Tips.tsx

@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
@@ -96,12 +96,30 @@ export const tips = [
   },
 ];
 
+const reversedTips = tips.slice(0).reverse();
+
 export default function Tips() {
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   const { t } = useLocale();
 
-  const [list, setList] = useState<typeof tips>([]);
+  const [list, setList] = useState<typeof tips>(() => {
+    if (typeof window === "undefined") {
+      return reversedTips;
+    }
+    try {
+      const removedTipsString = localStorage.getItem("removedTipsIds");
+      if (removedTipsString !== null) {
+        const removedTipsIds = removedTipsString.split(",").map((id) => parseInt(id, 10));
+        const filteredTips = reversedTips.filter((tip) => removedTipsIds.indexOf(tip.id) === -1);
+        return filteredTips;
+      } else {
+        return reversedTips;
+      }
+    } catch {
+      return reversedTips;
+    }
+  });
 
   const handleRemoveItem = (id: number) => {
     setList((currentItems) => {
@@ -117,13 +135,6 @@ export default function Tips() {
     });
   };
 
-  useEffect(() => {
-    const reversedTips = tips.slice(0).reverse();
-    const removedTipsString = localStorage.getItem("removedTipsIds") || "";
-    const removedTipsIds = removedTipsString.split(",").map((id) => parseInt(id, 10));
-    const filteredTips = reversedTips.filter((tip) => removedTipsIds.indexOf(tip.id) === -1);
-    setList(() => [...filteredTips]);
-  }, []);
   const baseOriginalList = list.slice(0).reverse();
   return (
     <div

packages/ui/components/card/Card.tsx

@@ -65,6 +65,7 @@ export function Card({
   thumbnailUrl,
   learnMore,
 }: BaseCardProps) {
+  const LinkComponent = learnMore && learnMore.href.startsWith("https") ? "a" : Link;
   return (
     <div
       className={classNames(
@@ -142,17 +143,14 @@ export function Card({
       {variant === "SidebarCard" && (
         <div className="mt-2 flex items-center justify-between">
           {learnMore && (
-            <Link
+            <LinkComponent
               href={learnMore.href}
               onClick={actionButton?.onClick}
               target="_blank"
               rel="noreferrer"
-              className="text-xs font-medium"
-              // NextJS thinks this is an internal link and tries to prefetch it (also on hover), which fails
-              // TODO: Extract this into a constant to handle /docs & /developer as well
-              prefetch={!learnMore.href.startsWith("https://cal.com/blog")}>
+              className="text-xs font-medium">
               {learnMore.text}
-            </Link>
+            </LinkComponent>
           )}
           <button
             className="p-0 text-xs font-normal text-gray-600 hover:text-gray-800"