Optimize Contributor Loading and Enhance Fast State Management

launcher/src/components/UI/credit-page/section/ContributorsList.vue

@@ -2,9 +2,7 @@
   <div class="contributors-parent w-full h-full">
     <div v-if="loader" class="loader">
       <div class="spinner-square">
-        <div class="square-1 square"></div>
-        <div class="square-2 square"></div>
-        <div class="square-3 square"></div>
+        <div v-for="n in 3" :key="n" :class="['square', `square-${n}`]"></div>
       </div>
     </div>
     <div v-else class="contributors-list" name="contributors-list">
@@ -23,92 +21,86 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import TheContributor from "../components/TheContributor.vue";
 import { useNodeHeader } from "@/store/nodeHeader";
-import ControlService from "@/store/ControlService";
 
 const headerStore = useNodeHeader();
-
 const results = ref([]);
 const isLoading = ref(true);
+const DELAY_FOR_CHECKING_DATA = 1000;
+
+// Computed Properties
+const loader = computed(() => isLoading.value);
+
+// Watchers
+watch(
+  () => headerStore.stereumTesters,
+  (newTesters) => updateResults(newTesters, "feedback, testing & suggestions"),
+  { immediate: true }
+);
 
-const loader = computed(() => results.value.length === 0);
+watch(
+  () => headerStore.stereumTranslators,
+  (newTranslators) => updateResults(newTranslators, "translation"),
+  { immediate: true }
+);
 
-onMounted(() => {
+// Lifecycle Hooks
+onMounted(handleCreditType);
+
+onUnmounted(clearComponentState);
+
+// Methods
+function handleCreditType() {
+  isLoading.value = true;
   if (headerStore.choosedCreditType === "technical contribution") {
     fetchGithubContributors();
-  } else if (headerStore.choosedCreditType === "feedback, testing & suggestions") {
-    fetchStereumTesters();
-  } else if (headerStore.choosedCreditType === "translation") {
-    fetchStereumTranslators();
+  } else {
+    setTimeout(() => {
+      isLoading.value = results.value.length === 0;
+    }, DELAY_FOR_CHECKING_DATA);
   }
-});
-
-onUnmounted(() => {
-  results.value = [];
-  isLoading.value = true;
-});
+}
 
-const fetchStereumTranslators = async () => {
-  try {
-    const translators = await ControlService.fetchTranslators();
-    if (translators && Array.isArray(translators)) {
-      results.value = translators.sort((a, b) => a.name.localeCompare(b.name));
-      isLoading.value = results.value.length === 0;
-    } else {
-      console.error("fetchTranslators did not return an array");
-    }
-  } catch (error) {
-    console.error("Error fetching translators:", error);
-    isLoading.value = true;
+function updateResults(newData, creditType) {
+  if (headerStore.choosedCreditType === creditType) {
+    results.value = newData;
+    isLoading.value = false;
   }
-};
+}
 
-const fetchStereumTesters = async () => {
+async function fetchGithubContributors() {
   try {
-    const testers = await ControlService.fetchGitHubTesters();
-    if (testers && Array.isArray(testers)) {
-      results.value = testers;
-      console.log("testers fetched:", JSON.stringify(results.value));
-      isLoading.value = results.value.length === 0;
-    } else {
-      console.error("fetchTesters did not return an array");
-    }
+    const response = await fetch("https://api.github.com/repos/stereum-dev/ethereum-node/contributors");
+    if (!response.ok) throw new Error("Network response was not ok");
+    const contributors = await response.json();
+    results.value = contributors.map((contributor, index) => ({
+      id: index,
+      name: contributor.login,
+      avatar: contributor.avatar_url,
+      score: contributor.contributions,
+    }));
   } catch (error) {
-    console.error("Error fetching Testers:", error);
-    isLoading.value = true;
+    console.error("Error fetching data:", error);
+  } finally {
+    isLoading.value = false;
   }
-};
+}
 
-const fetchGithubContributors = () => {
+function getClass(index) {
+  if (headerStore.choosedCreditType === "translation") return {};
+  return {
+    "gold-border": index === 0,
+    "silver-border": index === 1,
+    "bronze-border": index === 2,
+  };
+}
+
+function clearComponentState() {
+  results.value = [];
   isLoading.value = true;
-  fetch("https://api.github.com/repos/stereum-dev/ethereum-node/contributors")
-    .then((response) => {
-      if (!response.ok) throw new Error("Network response was not ok");
-      return response.json();
-    })
-    .then((data) => {
-      results.value = data.map((contributor, index) => ({
-        id: index,
-        name: contributor.login,
-        avatar: contributor.avatar_url,
-        score: contributor.contributions,
-      }));
-    })
-    .catch((error) => console.error("Error fetching data:", error))
-    .finally(() => (isLoading.value = false));
-};
-
-const getClass = (index) => {
-  const baseClasses = {};
-  if (headerStore.choosedCreditType !== "translation") {
-    if (index === 0) baseClasses["gold-border"] = true;
-    else if (index === 1) baseClasses["silver-border"] = true;
-    else if (index === 2) baseClasses["bronze-border"] = true;
-  }
-  return baseClasses;
-};
+}
 </script>
 
 <style scoped>

launcher/src/components/UI/setting-page/SettingScreen.vue

@@ -34,16 +34,17 @@ import VolumeSlider from "./components/VolumeSlider";
 import OutputOptions from "./components/OutputOptions.vue";
 import LanguageBtn from "./components/LanguageBtn.vue";
 import CreditButtons from "./section/CreditButtons.vue";
-import { ref, computed } from "vue";
-// import LanguagePanel from "./section/LanguagePanel.vue";
+import { ref, computed, onMounted } from "vue";
 import CreditBtn from "./components/CreditBtn.vue";
 import { useRouter } from "vue-router";
 import { useLangStore } from "@/store/languages";
+import { useNodeHeader } from "@/store/nodeHeader";
+import ControlService from "@/store/ControlService";
 
 const mainBox = ref("general");
-// const langActive = ref(false);
 const router = useRouter();
 const langStore = useLangStore();
+const headerStore = useNodeHeader();
 
 const sidebarButtons = ref([
   { name: "general", label: "General" },
@@ -56,8 +57,40 @@ const toggleSettings = (name) => {
   mainBox.value = name;
 };
 
+onMounted(() => {
+  if (!headerStore.stereumTesters.length || !headerStore.stereumTranslators.length) {
+    fetchStereumTesters();
+    fetchStereumTranslators();
+  }
+});
+
+const fetchStereumTesters = async () => {
+  try {
+    const testers = await ControlService.fetchGitHubTesters();
+    if (testers && Array.isArray(testers)) {
+      headerStore.stereumTesters = testers;
+    } else {
+      console.error("fetchTesters did not return an array");
+    }
+  } catch (error) {
+    console.error("Error fetching Testers:", error);
+  }
+};
+
+const fetchStereumTranslators = async () => {
+  try {
+    const translators = await ControlService.fetchTranslators();
+    if (translators && Array.isArray(translators)) {
+      headerStore.stereumTranslators = translators.sort((a, b) => a.name.localeCompare(b.name));
+    } else {
+      console.error("fetchTranslators did not return an array");
+    }
+  } catch (error) {
+    console.error("Error fetching translators:", error);
+  }
+};
+
 const langActiveBox = () => {
-  // langActive.value = !langActive.value;
   router.push("/");
   langStore.settingPageIsVisible = true;
 };

launcher/src/store/nodeHeader.js

@@ -3,6 +3,11 @@ import { defineStore } from "pinia";
 export const useNodeHeader = defineStore("nodeHeader", {
   state: () => {
     return {
+      //Stereum contributers begin (credit page)
+      stereumTesters: [],
+      stereumTranslators: [],
+      //Stereum contributers end
+
       //Service Modals begin
       isServiceAvailable: true,
       showGrafanaWindow: false,