Merge branch 'loading-spinner'

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 target
 .astro
+github_api_test_token

source/statistics/GitHubRepositories.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
+import type { Maybe } from "true-myth";
+import type { GitHubStatistics } from "../github-statistics/github-statistics-schema";
 import Figure from "./Figure.vue";
+import LoadingSpinner from "./LoadingSpinner.vue";
 import Cite from "./Cite.vue";
 
 interface Properties {
-	readonly repositoriesTotalCount: number;
+	readonly isFetching: boolean;
+	readonly gitHubStatistics: Maybe<GitHubStatistics>;
 }
 
-const { repositoriesTotalCount } = defineProps<Properties>();
+const { isFetching, gitHubStatistics } = defineProps<Properties>();
 </script>
 
 <template>
 	<Figure description="GitHub Repos">
-		<Cite aria-label="GitHub Repos">
-			{{ repositoriesTotalCount }}
+		<LoadingSpinner v-if="isFetching" />
+		<Cite v-if="!isFetching" aria-label="GitHub Repos">
+			{{ gitHubStatistics.get("user").get("repositories").get("totalCount").unwrapOr(0) }}
 		</Cite>
 	</Figure>
 </template>

source/statistics/GitHubStars.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
+import type { Maybe } from "true-myth";
+import type { GitHubStatistics } from "../github-statistics/github-statistics-schema";
 import Figure from "./Figure.vue";
+import LoadingSpinner from "./LoadingSpinner.vue";
 import Cite from "./Cite.vue";
 
 interface Properties {
-	readonly starredRepositoriesTotalCount: number;
+	readonly isFetching: boolean;
+	readonly gitHubStatistics: Maybe<GitHubStatistics>;
 }
 
-const { starredRepositoriesTotalCount } = defineProps<Properties>();
+const { isFetching, gitHubStatistics } = defineProps<Properties>();
 </script>
 
 <template>
 	<Figure description="GitHub Stars">
-		<Cite ariaLabel="GitHub Stars">
-			{{ starredRepositoriesTotalCount }}
+		<LoadingSpinner v-if="isFetching" />
+		<Cite v-if="!isFetching" ariaLabel="GitHub Stars">
+			{{ gitHubStatistics.get("user").get("starredRepositories").get("totalCount").unwrapOr(0) }}
 		</Cite>
 	</Figure>
 </template>

source/statistics/LoadingSpinner.vue

@@ -0,0 +1,94 @@
+<template>
+	<svg class="h-6 fill-current text-dracula-green" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg">
+		<rect y="10" width="15" height="120" rx="6">
+			<animate
+				attributeName="height"
+				begin="0.5s"
+				dur="1s"
+				values="120;110;100;90;80;70;60;50;40;140;120"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+			<animate
+				attributeName="y"
+				begin="0.5s"
+				dur="1s"
+				values="10;15;20;25;30;35;40;45;50;0;10"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+		</rect>
+		<rect x="30" y="10" width="15" height="120" rx="6">
+			<animate
+				attributeName="height"
+				begin="0.25s"
+				dur="1s"
+				values="120;110;100;90;80;70;60;50;40;140;120"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+			<animate
+				attributeName="y"
+				begin="0.25s"
+				dur="1s"
+				values="10;15;20;25;30;35;40;45;50;0;10"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+		</rect>
+		<rect x="60" width="15" height="140" rx="6">
+			<animate
+				attributeName="height"
+				begin="0s"
+				dur="1s"
+				values="120;110;100;90;80;70;60;50;40;140;120"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+			<animate
+				attributeName="y"
+				begin="0s"
+				dur="1s"
+				values="10;15;20;25;30;35;40;45;50;0;10"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+		</rect>
+		<rect x="90" y="10" width="15" height="120" rx="6">
+			<animate
+				attributeName="height"
+				begin="0.25s"
+				dur="1s"
+				values="120;110;100;90;80;70;60;50;40;140;120"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+			<animate
+				attributeName="y"
+				begin="0.25s"
+				dur="1s"
+				values="10;15;20;25;30;35;40;45;50;0;10"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+		</rect>
+		<rect x="120" y="10" width="15" height="120" rx="6">
+			<animate
+				attributeName="height"
+				begin="0.5s"
+				dur="1s"
+				values="120;110;100;90;80;70;60;50;40;140;120"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+			<animate
+				attributeName="y"
+				begin="0.5s"
+				dur="1s"
+				values="10;15;20;25;30;35;40;45;50;0;10"
+				calcMode="linear"
+				repeatCount="indefinite"
+			/>
+		</rect>
+	</svg>
+</template>

source/statistics/Statistics.astro

@@ -14,6 +14,6 @@ import { icons } from "feather-icons";
 		class="m-auto mb-4 h-2 w-1/2 rounded-lg border-none bg-dracula-red bg-gradient-to-br from-yellow to-dracula-pink"
 	/>
 	<div class="m-auto grid max-w-screen-lg grid-cols-2 gap-2 sm:gap-4 sm:p-4 lg:grid-cols-4">
-		<StatisticsData client:load />
+		<StatisticsData client:idle />
 	</div>
 </section>

source/statistics/StatisticsData.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed } from "vue";
 import { useFetch } from "@vueuse/core";
-import { isPlainObject } from "@sindresorhus/is";
 import { icons } from "feather-icons";
+import { Maybe } from "true-myth";
 import YearsInBusiness from "./YearsInBusiness.vue";
 import GitHubRepositories from "./GitHubRepositories.vue";
 import GitHubStars from "./GitHubStars.vue";
@@ -13,29 +13,23 @@ const currentYear = import.meta.env.PROD ? new Date() : new Date(2022, 2, 23);
 const careerStartYear = 2001;
 const yearsOfExperience = currentYear.getFullYear() - careerStartYear;
 
-const { isFinished, data: gitHubStatisticsResponse } = useFetch("/api/github-statistics").get().json();
+const { isFinished, isFetching, data: gitHubStatisticsResponse } = useFetch("/api/github-statistics").get().json();
 
-const gitHubStatistics = ref<GitHubStatistics>();
-
-watch(isFinished, () => {
+const gitHubStatistics = computed<Maybe<GitHubStatistics>>(() => {
 	if (isFinished.value) {
-		gitHubStatistics.value = gitHubStatisticsSchema.parse(gitHubStatisticsResponse.value);
+		return Maybe.just(gitHubStatisticsSchema.parse(gitHubStatisticsResponse.value));
 	}
+
+	return Maybe.nothing();
 });
 
 const barChartIcon = icons["bar-chart"].toSvg({ class: "text-dracula-green w-6 h-6 mt-2" });
 </script>
 
 <template>
 	<YearsInBusiness :years-of-experience="yearsOfExperience" />
-	<GitHubRepositories
-		v-if="isPlainObject(gitHubStatistics)"
-		:repositories-total-count="gitHubStatistics.user.repositories.totalCount"
-	/>
-	<GitHubStars
-		v-if="isPlainObject(gitHubStatistics)"
-		:starred-repositories-total-count="gitHubStatistics.user.starredRepositories.totalCount"
-	/>
+	<GitHubRepositories :is-fetching="isFetching" :gitHubStatistics="gitHubStatistics" />
+	<GitHubStars :is-fetching="isFetching" :gitHubStatistics="gitHubStatistics" />
 	<Figure description="Lines of Code">
 		<figure v-html="barChartIcon" />
 	</Figure>