feat(board header): add yellow offline icon for loading online status, red icon for offline status

src/views/home/boards-box/boards-box.tsx

@@ -18,12 +18,11 @@ const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbit
   const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`;
 
   const subplebbitData = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
-  const { isDefinitelyOffline, isOffline, offlineTitle } = useIsSubplebbitOffline(subplebbitData);
-  const iconClass = `${styles.offlineIcon} ${isDefinitelyOffline ? styles.redOfflineIcon : ''}`;
+  const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbitData);
 
   return (
     <div className={styles.subplebbit} key={address}>
-      {isOffline && <span className={`${styles.offlineIcon} ${iconClass}`} title={offlineTitle} />}
+      {(isOffline || isOnlineStatusLoading) && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
       <Link to={boardLink}>{title || address}</Link>
       {nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
     </div>

src/views/home/home.module.css

@@ -176,7 +176,6 @@
 }
 
 .offlineIcon {
-  background-image: url('/public/assets/icons/offline.png');
   display: inline-block;
   vertical-align: text-top;
   margin-right: 2px;
@@ -187,10 +186,6 @@
   image-rendering: pixelated;
 }
 
-.redOfflineIcon {
-  background-image: url('/public/assets/icons/offline-red.png') !important;
-}
-
 .boardsBoxContent {
   font-size: 93%;
   padding: 0.5em;