add LoadingSpinner with placeholder tips (see desc

the old tips.json was simple, but it made it so english text was always on the page if something was loading, regardless of language
i also heard early on that some translators wanted to make tips for their language too, which wasnt possible with the old tips.json
for now, this uses a placeholder list of tips built into loadingspinner, but later ill figure out a better place to put tips

Author: JeremyGamer13

src/lib/components/CategoryHome/MyFeed.svelte

@@ -5,6 +5,7 @@
     // components
     import { Category, UserDisplay } from "PenguinMod-SvelteUI";
     import Icon from "$lib/components/Icon/Component.svelte";
+    import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
     import LocalizedString from "$lib/components/Localization/LocalizedString.svelte";
     
     import { CACHE_USER_FEED } from "$lib/resources/cache/cache-time";
@@ -102,7 +103,9 @@
         </div>
     {:else}
         {#if loading}
-            <p>TODO: Loading spinner</p>
+            <div class="category-textdisplay">
+                <LoadingSpinner />
+            </div>
         {:else if failed}
             <div class="category-textdisplay" style="color:red">
                 <p>

src/lib/components/CategoryHome/WhatsNew.svelte

@@ -4,6 +4,7 @@
     // components
     import { Category, UserDisplay } from "PenguinMod-SvelteUI";
     import Icon from "$lib/components/Icon/Component.svelte";
+    import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
     import LocalizedString from "$lib/components/Localization/LocalizedString.svelte";
     
     import { CACHE_BASIC_API_UPDATES } from "$lib/resources/cache/cache-time";
@@ -65,7 +66,9 @@
         </a>
     {/snippet}
     {#if loading}
-        <p>TODO: Loading spinner</p>
+        <div class="single-container">
+            <LoadingSpinner />
+        </div>
     {:else if failed}
         <div class="single-container" style="color:red">
             <!-- TODO: UNIMPORTANT: PenguinSVG: server down icon -->

src/lib/components/LoadingSpinner.svelte

@@ -0,0 +1,122 @@
+<script>
+    import { onMount } from "svelte";
+    import { browser } from "$app/environment";
+
+    // components
+    import LocalizedAlt from "./Localization/LocalizedAlt.svelte";
+    import LocalizedTooltip from "./Localization/LocalizedTooltip.svelte";
+    
+    import delay from "$lib/resources/delay.js";
+
+    import StoreSettings from "$lib/stores/settings";
+    
+    let props = $props();
+
+    // TODO: I do not want to have the same Tips.json structure as legacy home, so this is just a placeholder. What I *really* want is to figure out how to structure a list of tips that can be translated. Translators really wanna make tips too.
+    const tips = [
+        "This is a tip.",
+        "This is also a tip.",
+        "Did you know this list of tips is going to be replaced?",
+        "Fun fact: This is a tip.",
+        "Fun fact: You are waiting for something to load.",
+        "Good job ianyourgod",
+        "Good job jwklong",
+        "Good job JeremyGamer13",
+        "Good job godslayerakp",
+    ];
+
+    /** @type {HTMLSpanElement} */
+    // svelte-ignore non_reactive_update
+    let tipsSpan = null;
+    let tipsLast = null;
+    let tipsText = $state("");
+    let tipsMounted = $state(true);
+    const tipsEnabled = $derived(props.tips !== false);
+    const tipsSwap = async () => {
+        if (!browser) return;
+        if (!tipsMounted) return;
+        if (!tipsEnabled) return;
+        if (!tipsSpan) return;
+
+        // we fade out, swap tip, then fade in
+        console.log("changing tips"); // TODO: Temp
+        if (tipsSpan.dataset.swapped === "true") {
+            tipsSpan.animate([{ opacity: "0" }], { duration: 1000, fill: "forwards" });
+            await delay(1000);
+        }
+        
+        // swap tip
+        const possibleTips = tips.filter(value => value !== tipsLast);
+        tipsText = possibleTips[Math.floor(Math.random() * possibleTips.length)];
+        tipsSpan.dataset.swapped = true;
+
+        // fade in
+        tipsSpan.animate([{ opacity: "1" }], { duration: 1000, fill: "forwards" });
+    };
+    const tipsLoop = async () => {
+        // NOTE: wait a second so we dont show a tip if there's no reason to
+        await delay(1000);
+
+        // swap tips every 7 seconds
+        tipsSwap();
+        const interval = setInterval(() => {
+            if (!tipsMounted) clearInterval(interval);
+            tipsSwap();
+        }, 7000);
+    };
+    onMount(() => {
+        if (!tipsEnabled) return;
+        tipsLoop();
+        return () => {
+            tipsMounted = false;
+        };
+    });
+</script>
+
+<div class="loading">
+    <img
+        src={$StoreSettings.appTheme === "light" ? "/asset/icons/loading-blue.svg" : "/asset/icons/loading-white.svg"}
+        alt="Loading"
+        {@attach LocalizedAlt("generic.loading")}
+        {@attach LocalizedTooltip("generic.loading")}
+    />
+    {#if tipsEnabled}
+        <span
+            style="opacity:0"
+            data-swapped={false}
+            bind:this={tipsSpan}
+        >
+            {tipsText}
+        </span>
+    {/if}
+</div>
+
+<style>
+    .loading {
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .loading img {
+        animation-name: loading;
+        animation-delay: 0s;
+        animation-duration: 1s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+
+        user-select: none;
+    }
+    .loading span {
+        margin-top: 8px;
+
+        user-select: none;
+    }
+    
+    @keyframes loading {
+        0% { transform: rotate(0deg);  }
+        50% { transform: rotate(180deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>

src/routes/+page.svelte

@@ -8,6 +8,7 @@
     import { Button, Category, SwappableHolder, Project } from "PenguinMod-SvelteUI";
     import Icon from "$lib/components/Icon/Component.svelte";
     import MyFeed from "$lib/components/CategoryHome/MyFeed.svelte";
+    import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
     import WhatsNew from "$lib/components/CategoryHome/WhatsNew.svelte";
     import PenguinNews from "$lib/components/CategoryHome/PenguinNews.svelte";
     import LocalizedString from "$lib/components/Localization/LocalizedString.svelte";
@@ -287,7 +288,9 @@
             <!-- snippet for each section to reuse -->
             {#snippet projectRow(section)}
                 {#if frontPageLoading}
-                    TODO: Loading spinner
+                    <div class="section-categories-projects-rowtext">
+                        <LoadingSpinner />
+                    </div>
                 {:else if frontPageError}
                     <div
                         class="section-categories-projects-rowtext"
@@ -842,7 +845,7 @@
     }
     .section-categories-projects-rowtext {
         width: 100%;
-        height: 100%;
+        height: 200px;
 
         display: flex;
         flex-direction: column;