hide ranking

enjoy/src/renderer/components/posts/posts.tsx

@@ -1,11 +1,12 @@
 import { useContext, useEffect, useState } from "react";
 import { AppSettingsProviderContext } from "@renderer/context";
-import { PostCard } from "@renderer/components";
+import { PostCard, LoaderSpin } from "@renderer/components";
 import { useToast } from "@renderer/components//ui";
 import { t } from "i18next";
 
 export const Posts = () => {
   const { webApi } = useContext(AppSettingsProviderContext);
+  const [loading, setLoading] = useState<boolean>(true);
   const [posts, setPosts] = useState<PostType[]>([]);
   const { toast } = useToast();
 
@@ -28,20 +29,30 @@ export const Posts = () => {
   };
 
   const fetchPosts = async () => {
-    webApi.posts().then(
-      (res) => {
+    webApi
+      .posts()
+      .then((res) => {
         setPosts(res.posts);
-      },
-      (err) => {
-        console.error(err);
-      }
-    );
+      })
+      .catch((err) => {
+        toast({
+          description: err.message,
+          variant: "destructive",
+        });
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   useEffect(() => {
     fetchPosts();
   }, []);
 
+  if (loading) {
+    return <LoaderSpin />;
+  }
+
   return (
     <div className="max-w-screen-sm mx-auto">
       {posts.length === 0 && (

enjoy/src/renderer/pages/community.tsx

@@ -26,16 +26,22 @@ export default () => {
         <Tabs defaultValue="square">
           <TabsList className="mb-6">
             <TabsTrigger value="square">{t("square")}</TabsTrigger>
-            <TabsTrigger value="rankings">{t("rankings")}</TabsTrigger>
+            <TabsTrigger
+              value="rankings"
+              disabled
+              className="cursor-not-allowed"
+              data-tooltip-id="global-tooltip"
+              data-tooltip-content={t("comingSoon")}
+            >
+              {t("rankings")}
+            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="square">
             <Posts />
           </TabsContent>
 
-          <TabsContent value="rankings">
-            <UsersRankings />
-          </TabsContent>
+          <TabsContent value="rankings"></TabsContent>
         </Tabs>
       </div>
     </div>