adding loading screen with spinner (#204)

Author: digitalghost-dev

cmd/card/imageviewer.go

@@ -1,21 +1,53 @@
 package card
 
 import (
+	"github.com/charmbracelet/bubbles/spinner"
 	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+	"github.com/digitalghost-dev/poke-cli/styling"
 )
 
 type ImageModel struct {
-	CardName string
-	ImageURL string
-	Error    error
+	CardName  string
+	ImageURL  string
+	Error     error
+	Loading   bool
+	Spinner   spinner.Model
+	ImageData string
+}
+
+type imageReadyMsg struct {
+	sixelData string
+}
+
+// fetchImageCmd downloads and renders the image asynchronously
+func fetchImageCmd(imageURL string) tea.Cmd {
+	return func() tea.Msg {
+		sixelData, err := CardImage(imageURL)
+		if err != nil {
+			return imageReadyMsg{err.Error()}
+		}
+		return imageReadyMsg{sixelData: sixelData}
+	}
 }
 
 func (m ImageModel) Init() tea.Cmd {
-	return nil
+	return tea.Batch(
+		m.Spinner.Tick,
+		fetchImageCmd(m.ImageURL),
+	)
 }
 
 func (m ImageModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
+	case imageReadyMsg:
+		m.Loading = false
+		m.ImageData = msg.sixelData
+		return m, nil
+	case spinner.TickMsg:
+		var cmd tea.Cmd
+		m.Spinner, cmd = m.Spinner.Update(msg)
+		return m, cmd
 	case tea.KeyMsg:
 		switch msg.String() {
 		case "ctrl+c", "esc":
@@ -26,15 +58,23 @@ func (m ImageModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m ImageModel) View() string {
-	return m.ImageURL
+	if m.Loading {
+		return lipgloss.NewStyle().Padding(2).Render(
+			m.Spinner.View() + "Loading image for \n" + m.CardName,
+		)
+	}
+	return m.ImageData
 }
 
 func ImageRenderer(cardName string, imageURL string) ImageModel {
-	imageData, err := CardImage(imageURL)
+	s := spinner.New()
+	s.Spinner = spinner.Dot
+	s.Style = styling.Yellow
 
 	return ImageModel{
 		CardName: cardName,
-		ImageURL: imageData,
-		Error:    err,
+		ImageURL: imageURL,
+		Loading:  true,
+		Spinner:  s,
 	}
 }

cmd/card/imageviewer_test.go

@@ -1,25 +1,18 @@
 package card
 
 import (
-	"image"
-	"image/color"
-	"image/png"
-	"net/http"
-	"net/http/httptest"
+	"strings"
 	"testing"
 
 	tea "github.com/charmbracelet/bubbletea"
 )
 
 func TestImageModel_Init(t *testing.T) {
-	model := ImageModel{
-		CardName: "001/198 - Pineco",
-		ImageURL: "test-sixel-data",
-	}
+	model := ImageRenderer("001/198 - Pineco", "http://example.com/image.png")
 
 	cmd := model.Init()
-	if cmd != nil {
-		t.Error("Init() should return nil")
+	if cmd == nil {
+		t.Error("Init() should return a command (batch of spinner tick + fetch)")
 	}
 }
 
@@ -53,7 +46,6 @@ func TestImageModel_Update_CtrlC(t *testing.T) {
 	msg := tea.KeyMsg{Type: tea.KeyCtrlC}
 	_, cmd := model.Update(msg)
 
-	// Should return quit command
 	if cmd == nil {
 		t.Error("Update with Ctrl+C should return tea.Quit command")
 	}
@@ -73,107 +65,109 @@ func TestImageModel_Update_DifferentKey(t *testing.T) {
 	}
 }
 
-func TestImageModel_View(t *testing.T) {
-	expectedURL := "test-sixel-data-123"
+func TestImageModel_View_Loading(t *testing.T) {
+	model := ImageRenderer("001/198 - Pineco", "http://example.com/image.png")
+
+	result := model.View()
+
+	// When loading, should show spinner and card name
+	if result == "" {
+		t.Error("View() should not be empty when loading")
+	}
+	// Can't check exact spinner output as it's dynamic, but should contain card name
+	if !strings.Contains(result, "001/198 - Pineco") {
+		t.Error("View() should contain card name when loading")
+	}
+}
+
+func TestImageModel_View_Loaded(t *testing.T) {
+	expectedData := "test-sixel-data-123"
 	model := ImageModel{
-		CardName: "001/198 - Pineco",
-		ImageURL: expectedURL,
+		CardName:  "001/198 - Pineco",
+		ImageURL:  "http://example.com/image.png",
+		Loading:   false,
+		ImageData: expectedData,
 	}
 
 	result := model.View()
 
-	if result != expectedURL {
-		t.Errorf("View() = %v, want %v", result, expectedURL)
+	if result != expectedData {
+		t.Errorf("View() = %v, want %v", result, expectedData)
 	}
 }
 
 func TestImageModel_View_Empty(t *testing.T) {
 	model := ImageModel{
-		CardName: "001/198 - Pineco",
-		ImageURL: "",
+		CardName:  "001/198 - Pineco",
+		ImageURL:  "",
+		Loading:   false,
+		ImageData: "",
 	}
 
 	result := model.View()
 
 	if result != "" {
-		t.Errorf("View() with empty ImageURL should return empty string, got %v", result)
+		t.Errorf("View() with empty ImageData should return empty string, got %v", result)
 	}
 }
 
-func TestImageRenderer_Success(t *testing.T) {
-	// Create a test HTTP server that serves a valid PNG image
-	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		img := image.NewRGBA(image.Rect(0, 0, 10, 10))
-		blue := color.RGBA{R: 0, G: 0, B: 255, A: 255}
-		for y := 0; y < 10; y++ {
-			for x := 0; x < 10; x++ {
-				img.Set(x, y, blue)
-			}
-		}
-
-		w.Header().Set("Content-Type", "image/png")
-		w.WriteHeader(http.StatusOK)
-		_ = png.Encode(w, img)
-	}))
-	defer server.Close()
-
-	model := ImageRenderer("Pikachu", server.URL)
+func TestImageRenderer_InitializesCorrectly(t *testing.T) {
+	testURL := "http://example.com/pikachu.png"
+	model := ImageRenderer("Pikachu", testURL)
 
 	if model.CardName != "Pikachu" {
 		t.Errorf("ImageRenderer() CardName = %v, want %v", model.CardName, "Pikachu")
 	}
 
-	if model.Error != nil {
-		t.Errorf("ImageRenderer() Error should be nil on success, got %v", model.Error)
+	if model.ImageURL != testURL {
+		t.Errorf("ImageRenderer() ImageURL = %v, want %v", model.ImageURL, testURL)
 	}
 
-	if model.ImageURL == "" {
-		t.Error("ImageRenderer() ImageURL should not be empty on success")
+	if !model.Loading {
+		t.Error("ImageRenderer() should initialize with Loading = true")
+	}
+
+	if model.ImageData != "" {
+		t.Error("ImageRenderer() should initialize with empty ImageData")
 	}
 }
 
-func TestImageRenderer_Error(t *testing.T) {
-	// Create a test HTTP server that returns an error
-	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		w.WriteHeader(http.StatusNotFound)
-	}))
-	defer server.Close()
+func TestImageModel_Update_ImageReady(t *testing.T) {
+	model := ImageRenderer("Charizard", "http://example.com/charizard.png")
 
-	model := ImageRenderer("Charizard", server.URL)
+	msg := imageReadyMsg{sixelData: "test-sixel-data-456"}
+	newModel, cmd := model.Update(msg)
 
-	if model.CardName != "Charizard" {
-		t.Errorf("ImageRenderer() CardName = %v, want %v", model.CardName, "Charizard")
+	if cmd != nil {
+		t.Error("Update with imageReadyMsg should return nil command")
 	}
 
-	if model.Error == nil {
-		t.Error("ImageRenderer() Error should not be nil when image fetch fails")
+	updatedModel := newModel.(ImageModel)
+	if updatedModel.Loading {
+		t.Error(`Update with imageReadyMsg should set Loading to false`)
 	}
 
-	if model.ImageURL != "" {
-		t.Errorf("ImageRenderer() ImageURL should be empty on error, got %v", model.ImageURL)
+	if updatedModel.ImageData != "test-sixel-data-456" {
+		t.Errorf("Update with imageReadyMsg should set ImageData, got %v", updatedModel.ImageData)
 	}
 }
 
-func TestImageRenderer_InvalidImage(t *testing.T) {
-	// Create a test HTTP server that returns invalid image data
-	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		w.Header().Set("Content-Type", "image/png")
-		w.WriteHeader(http.StatusOK)
-		_, _ = w.Write([]byte("not a valid image"))
-	}))
-	defer server.Close()
+func TestImageModel_Update_SpinnerTick(t *testing.T) {
+	model := ImageRenderer("Mewtwo", "http://example.com/mewtwo.png")
 
-	model := ImageRenderer("Mewtwo", server.URL)
+	// Create a spinner tick message
+	msg := model.Spinner.Tick()
 
-	if model.CardName != "Mewtwo" {
-		t.Errorf("ImageRenderer() CardName = %v, want %v", model.CardName, "Mewtwo")
-	}
+	// Update should handle spinner ticks
+	newModel, cmd := model.Update(msg)
 
-	if model.Error == nil {
-		t.Error("ImageRenderer() Error should not be nil when image decoding fails")
+	// Should return a spinner command
+	if cmd == nil {
+		t.Error("Update with spinner.TickMsg should return a command")
 	}
 
-	if model.ImageURL != "" {
-		t.Errorf("ImageRenderer() ImageURL should be empty on error, got %v", model.ImageURL)
+	// Model should still be ImageModel
+	if _, ok := newModel.(ImageModel); !ok {
+		t.Error("Update should return ImageModel")
 	}
 }