feat: implement loading animation for projects

Author: nsh07

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/AppHomeScreen.kt

@@ -7,11 +7,9 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.*
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.MaterialTheme.typography
-import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -24,6 +22,7 @@ import kotlinx.coroutines.launch
 import nsh07.composeapp.generated.resources.*
 import org.jetbrains.compose.resources.painterResource
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun AppHomeScreen(
     projectState: ProjectsState,
@@ -189,11 +188,17 @@ fun AppHomeScreen(
                 }
                 Spacer(Modifier.height(112.dp))
             }
-            items(projectState.projects, key = { it.id }) {
-                ProjectCard(
-                    project = it,
-                    cardPadding = cardPadding,
-                    modifier = Modifier.padding(bottom = 32.dp)
+            if (!projectState.isLoading)
+                items(projectState.projects, key = { it.id }) {
+                    ProjectCard(
+                        project = it,
+                        cardPadding = cardPadding,
+                        modifier = Modifier.padding(bottom = 32.dp)
+                    )
+                }
+            else item {
+                LinearWavyProgressIndicator(
+                    Modifier.fillMaxWidth().padding(cardPadding).padding(bottom = 32.dp)
                 )
             }
             item("github link text") {

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/ExperienceCard.kt

@@ -27,6 +27,7 @@ import nsh07.composeapp.generated.resources.open_in_browser
 import org.jetbrains.compose.resources.painterResource
 import kotlin.text.Typography.bullet
 import kotlin.text.Typography.mdash
+import kotlin.text.Typography.nbsp
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
@@ -45,7 +46,14 @@ fun ExperienceCard(
     ) {
         Row(Modifier.fillMaxWidth().padding(cardPadding)) {
             Text(
-                remember { "${experience.start} $mdash ${experience.end}".toUpperCase(Locale.current) },
+                remember {
+                    "${experience.start.replace(' ', nbsp)} $mdash ${
+                        experience.end.replace(
+                            ' ',
+                            nbsp
+                        )
+                    }".toUpperCase(Locale.current)
+                },
                 style = typography.labelMedium,
                 color = colorScheme.outline,
                 modifier = Modifier.padding(top = 4.dp, end = 16.dp).weight(1f)