It is not the thumbnail code that is at fault, but rather the file's existence/path mismatch. If the resizer writes in a different format or is delayed, an empty string appears in the DB field - StaggeredView placeholder.

Try this (If the thumbnail has not yet been created, the field will contain the original URL (displayed image). When the resizer uploads the thumbnail, the next call will return the thumbnail URL — the UI will automatically \"switch\" when it reloads/refreshes.):

import 'dart:async';\nimport 'dart:convert';\nimport 'package:firebase_storage/firebase_storage.dart';\n\n/// Returns the thumbnail URL, or if it does not yet exist, the original URL.\n/// Supports several possible name formats and extensions.\nFuture<String> getGridThumbnailUrl(String originalUrl) async {\n  if (originalUrl.isEmpty) return '';\n\n  try {\n    // 1) Extract the Storage path from the download URL (up to '?')\n    final parts = originalUrl.split('/o/');\n    if (parts.length < 2) return originalUrl;\n    final encoded = parts.last.split('?').first; // users%2Fuid%2Fimg.jpg\n    final origPath = Uri.decodeComponent(encoded); // users/uid/img.jpg\n\n    // 2) Combine possible thumbnail path variants\n    //   Adjust the suffix/extension according to your resizer\n    String base = origPath;\n    final dot = origPath.lastIndexOf('.');\n    if (dot > 0) base = origPath.substring(0, dot);\n\n    final candidates = <String>[\n      '$base.200x200.jpg',\n      '$base.200x200.jpeg',\n      '$base.200x200.webp',\n      '$base-200x200.jpg',\n      '$base-200x200.jpeg',\n      '$base-200x200.webp',\n    ];\n\n    // 3) Try to find the first existing thumbnail file (with retry)\n    for (final thumbPath in candidates) {\n      final ref = FirebaseStorage.instance.ref(thumbPath);\n\n      final found = await _existsWithRetry(ref, tries: 40, delayMs: 500);\n      if (found) {\n        return await ref.getDownloadURL();\n      }\n    }\n\n    // 4) If none found – return the original (fallback)\n    return originalUrl;\n  } catch (_) {\n    // In case of any error – return the original\n    return originalUrl;\n  }\n}\n\n/// Checks if the object exists with a simple retry (does not freeze the UI).\nFuture<bool> _existsWithRetry(Reference ref,\n    {int tries = 20, int delayMs = 300}) async {\n  for (var i = 0; i < tries; i++) {\n    try {\n      await ref.getMetadata(); // if meta, the file does not exist yet\n      return true;\n    } catch (_) {\n      await Future.delayed(Duration(milliseconds: delayMs));\n    }\n  }\n  return false;\n}

Show thumbnails in staggered view