Custom animating the dot dot dot button

src/client/java/com/owlmaddie/ClientInit.java

@@ -6,19 +6,26 @@ import com.owlmaddie.ui.ClickHandler;
 import net.fabricmc.api.ClientModInitializer;
 import net.fabricmc.fabric.api.client.networking.v1.ClientPlayConnectionEvents;
 import net.fabricmc.fabric.api.client.rendering.v1.WorldRenderEvents;
+import net.fabricmc.fabric.api.client.event.lifecycle.v1.ClientTickEvents;
 
 /**
  * The {@code ClientInit} class initializes this mod in the client and defines all hooks into the
  * render pipeline to draw chat bubbles, text, and entity icons.
  */
 public class ClientInit implements ClientModInitializer {
+    private static long tickCounter = 0;
+
     @Override
     public void onInitializeClient() {
+        ClientTickEvents.END_CLIENT_TICK.register(client -> {
+            tickCounter++;
+        });
+
         ClickHandler.register();
 
         // Register an event callback to render text bubbles
         WorldRenderEvents.LAST.register((context) -> {
-            BubbleRenderer.drawTextAboveEntities(context, context.tickDelta());
+            BubbleRenderer.drawTextAboveEntities(context, tickCounter, context.tickDelta());
         });
 
         // Register an event callback for when the client disconnects from a server or changes worlds

src/client/java/com/owlmaddie/ui/BubbleRenderer.java

@@ -39,6 +39,8 @@ public class BubbleRenderer {
     protected static TextureLoader textures = new TextureLoader();
     public static int DISPLAY_NUM_LINES = 3;
     public static int DISPLAY_PADDING = 2;
+    public static int animationFrame = 0;
+    public static long lastTick = 0;
 
     public static void drawTextBubbleBackground(MatrixStack matrices, float x, float y, float width, float height, int friendship) {
         RenderSystem.enableDepthTest();
@@ -206,7 +208,7 @@ public class BubbleRenderer {
         }
     }
 
-    public static void drawTextAboveEntities(WorldRenderContext context, float partialTicks) {
+    public static void drawTextAboveEntities(WorldRenderContext context, long tick, float partialTicks) {
         Camera camera = context.camera();
         Entity cameraEntity = camera.getFocusedEntity();
         if (cameraEntity == null) return;
@@ -356,7 +358,16 @@ public class BubbleRenderer {
 
             } else if (chatData.status == ChatDataManager.ChatStatus.PENDING) {
                 // Draw 'pending' button
-                drawIcon("button-dot-0", matrices, -16, textHeaderHeight, 32, 17);
+                drawIcon("button-dot-" + animationFrame, matrices, -16, textHeaderHeight, 32, 17);
+
+                // Calculate animation frames (0-8) every X ticks
+                if (lastTick != tick && tick % 5 == 0) {
+                    lastTick = tick;
+                    animationFrame++;
+                }
+                if (animationFrame > 8) {
+                    animationFrame = 0;
+                }
 
             } else if (chatData.sender == ChatDataManager.ChatSender.ASSISTANT) {
                 // Draw text background (no smaller than 50F tall)

src/main/resources/assets/mobgpt/textures/ui/button-dot-0.png.mcmeta

-{
-    "animation": {
-        "frametime": 2,
-        "frames": [
-            {"index": 0, "time": 2},
-            {"index": 1, "time": 2},
-            {"index": 2, "time": 2},
-            {"index": 3, "time": 2},
-            {"index": 4, "time": 2},
-            {"index": 5, "time": 2},
-            {"index": 6, "time": 2},
-            {"index": 7, "time": 2},
-            {"index": 8, "time": 2}
-        ]
-    }
-}