Add fetch retries in status page

package-lock.json

@@ -19,6 +19,7 @@
         "just-debounce-it": "~3.2.0",
         "masto": "~5.5.1",
         "mem": "~9.0.2",
+        "p-retry": "~5.1.2",
         "preact": "~10.11.3",
         "react-hotkeys-hook": "~4.3.2",
         "react-intersection-observer": "~9.4.1",
@@ -2538,6 +2539,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/retry": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
+      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
@@ -4443,6 +4449,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/p-retry": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-5.1.2.tgz",
+      "integrity": "sha512-couX95waDu98NfNZV+i/iLt+fdVxmI7CbrrdC2uDWfPdUAApyxT4wmDlyOtR5KtTDmkDO0zDScDjDou9YHhd9g==",
+      "dependencies": {
+        "@types/retry": "0.12.1",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -4859,6 +4880,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -7663,6 +7692,11 @@
         "@types/node": "*"
       }
     },
+    "@types/retry": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
+      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
+    },
     "@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
@@ -9096,6 +9130,15 @@
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
       "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw=="
     },
+    "p-retry": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-5.1.2.tgz",
+      "integrity": "sha512-couX95waDu98NfNZV+i/iLt+fdVxmI7CbrrdC2uDWfPdUAApyxT4wmDlyOtR5KtTDmkDO0zDScDjDou9YHhd9g==",
+      "requires": {
+        "@types/retry": "0.12.1",
+        "retry": "^0.13.1"
+      }
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -9387,6 +9430,11 @@
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
     },
+    "retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",

package.json

@@ -21,6 +21,7 @@
     "just-debounce-it": "~3.2.0",
     "masto": "~5.5.1",
     "mem": "~9.0.2",
+    "p-retry": "~5.1.2",
     "preact": "~10.11.3",
     "react-hotkeys-hook": "~4.3.2",
     "react-intersection-observer": "~9.4.1",

src/pages/status.jsx

@@ -1,6 +1,7 @@
 import './status.css';
 
 import debounce from 'just-debounce-it';
+import pRetry from 'p-retry';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
@@ -87,8 +88,13 @@ function StatusPage() {
     }
 
     (async () => {
-      const heroFetch = () => masto.v1.statuses.fetch(id);
+      const heroFetch = () =>
-      const contextFetch = masto.v1.statuses.fetchContext(id);
+        pRetry(() => masto.v1.statuses.fetch(id), {
+          retries: 3,
+        });
+      const contextFetch = pRetry(() => masto.v1.statuses.fetchContext(id), {
+        retries: 2,
+      });
 
       const hasStatus = !!snapStates.statuses[id];
       let heroStatus = snapStates.statuses[id];