update libraries. Fix user refetching logic

Author: maslianok

app/profile/[login]/components/fetch-user-button.tsx

@@ -44,7 +44,7 @@ type FetchUserButtonProps = {
 const REFRESH_INTERVAL = 1_000;
 const CHECK_STATUS_INTERVAL = 20_000;
 const REFRESH_TIMEOUT = 10 * 60 * 1_000;
-const FETCH_MESSAGES = ['Fetching…', 'Still fetching 😐', '👀 👀 👀', 'Ping! Still not ready…'];
+const FETCH_MESSAGES = ['Fetching…', '🚬 Still fetching', '👀 👀 👀', 'Ping! Still not ready…'];
 
 export const FetchUserButton: FC<FetchUserButtonProps> = ({
   fetchingStatus,
@@ -71,10 +71,13 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
     if (initialFetchingDuration >= REFRESH_TIMEOUT) {
       return;
     }
-    // You can determine when and how often to update
-    // the time here. In this example we update it only once
+
+    // invalidate the cache every time the page loads with fetching status
+    // so the next time the user updates the profile, the latest data is fetched
+    fetch(`/api/revalidate?tag=${encodeURIComponent(`profile:${login}`)}`);
+
     setFetchingDuration(initialFetchingDuration);
-  }, [fetchingStatus, fetchingUpdatedAt]);
+  }, [fetchingStatus, fetchingUpdatedAt, login]);
 
   const checkFetchingStatus = useCallback(async () => {
     setLoadingLabel('Checking…');
@@ -93,6 +96,11 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
       fetchAttempt.current += 1;
       setLoadingLabel(FETCH_MESSAGES[fetchAttempt.current % FETCH_MESSAGES.length]);
     } else {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      setLoadingLabel('Reloading…');
+
       await fetch(`/api/revalidate?tag=${encodeURIComponent(`profile:${login}`)}`);
       window.location.reload();
     }
@@ -103,6 +111,9 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
 
     posthog.capture('profile.fetch', { login });
 
+    // immediately invalidate the cache, so if the user reloads the page, the latest data is fetched
+    fetch(`/api/revalidate?tag=${encodeURIComponent(`profile:${login}`)}`);
+
     const res = await fetch(`/api/profile/${login}`, { method: 'POST' });
 
     if (!res.ok) {
@@ -184,7 +195,9 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
     <div className={cn('flex flex-col gap-2', className)}>
       {attachDialogIfNeeded()}
       {fetchingDuration !== null && (
-        <div className="text-xs text-muted-foreground">Time passed: {Math.floor(fetchingDuration / 1000)}s</div>
+        <div className="text-xs text-muted-foreground">
+          Next check in {Math.floor((CHECK_STATUS_INTERVAL - (fetchingDuration % CHECK_STATUS_INTERVAL)) / 1000)} s
+        </div>
       )}
     </div>
   );

package.json

@@ -14,8 +14,8 @@
     "figma:icons": "tsc lib/figma/download-icons.ts --outDir dist && dotenv -e .env.local node dist/download-icons.js && pnpm run icons"
   },
   "dependencies": {
-    "@auth/mongodb-adapter": "^3.9.1",
-    "@hookform/resolvers": "^5.0.1",
+    "@auth/mongodb-adapter": "^3.10.0",
+    "@hookform/resolvers": "^5.2.0",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
@@ -37,46 +37,46 @@
     "embla-carousel-fade": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "jsonwebtoken": "^9.0.2",
-    "lucide-react": "^0.525.0",
-    "mongodb": "^6.16.0",
-    "next": "15.4.0-canary.104",
+    "lucide-react": "^0.527.0",
+    "mongodb": "^6.18.0",
+    "next": "15.4.2-canary.18",
     "next-auth": "5.0.0-beta.28",
     "next-themes": "^0.4.6",
     "nuqs": "^2.4.3",
     "posthog-js": "^1.246.0",
-    "posthog-node": "^4.17.2",
+    "posthog-node": "^5.6.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.4",
+    "react-hook-form": "^7.61.1",
     "react-icons": "^5.5.0",
     "react-spinners": "^0.17.0",
-    "recharts": "^3.0.0",
-    "satori": "^0.13.1",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.3.0",
+    "recharts": "^3.1.0",
+    "satori": "^0.16.1",
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.1",
     "vaul": "^1.1.2",
-    "zod": "^3.25.28"
+    "zod": "^4.0.10"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
-    "@graphql-codegen/cli": "^5.0.5",
-    "@graphql-codegen/typed-document-node": "^5.1.1",
+    "@graphql-codegen/cli": "^5.0.7",
+    "@graphql-codegen/typed-document-node": "^5.1.2",
     "@svgr/cli": "^8.1.0",
-    "@tailwindcss/postcss": "^4.1.7",
-    "@types/jsonwebtoken": "^9.0.9",
-    "@types/node": "^22.15.21",
-    "@types/react": "^19.1.5",
-    "@types/react-dom": "^19.1.5",
-    "dotenv-cli": "^8.0.0",
-    "eslint": "^9.27.0",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "dotenv-cli": "^9.0.0",
+    "eslint": "^9.32.0",
     "eslint-config-next": "15.4.0-canary.51",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "graphql": "^16.11.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.1.7",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3"
   },
   "packageManager": "[email protected]+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"